Chart.js水平条形图初始加载缩放异常技术问询

I’ve run into this exact issue before! Chart.js’s responsive rendering can glitch out on page load, especially with horizontal bar charts, because it often miscalculates the container’s dimensions when the DOM isn’t fully ready. The chart ends up squished until you resize the window, which triggers a re-render with the correct size.

Here are a few proven fixes to resolve this across desktop, laptop, and mobile devices:

1. Ensure Your Chart Container Has Explicit Dimensions #

First, make sure the parent container of your <canvas> element has clear CSS sizing. This gives Chart.js a definite size to work with on initial load:

.chart-container {
  width: 100%;
  min-height: 400px; /* Use a fixed value or viewport units like 50vh for responsiveness */
}

Then wrap your canvas in this container:

<div class="chart-container">
  <canvas id="myChart"></canvas>
</div>

2. Initialize the Chart After the DOM Is Fully Loaded #

Don’t run your Chart.js code until the DOM has finished rendering. Wrap your initialization in DOMContentLoaded to avoid premature execution:

document.addEventListener('DOMContentLoaded', function() {
  // Your full Chart.js code goes here
});

3. Manually Trigger a Resize After Initialization #

Even with the above steps, sometimes you need to nudge Chart.js to re-calculate the size. You can either call the chart’s native resize() method or trigger a window resize event:

// After creating your myChart instance
setTimeout(() => {
  // Option 1: Use the chart's built-in resize method
  myChart.resize();

  // Option 2: Trigger a window resize event (alternative)
  // window.dispatchEvent(new Event('resize'));
}, 50);

The small timeout ensures the page has fully settled before triggering the resize.

4. Add maintainAspectRatio: false to Your Chart Options #

If you want the chart to fully fill its container without being constrained by a fixed aspect ratio, add this option to your chart config. This is especially helpful for responsive layouts:

var myChart = new Chart(ctx, {
  responsive: true,
  maintainAspectRatio: false, // Add this line
  type: 'horizontalBar',
  // Rest of your data/options...
});

Full Updated Code #

Here’s your original code with all the fixes applied:

document.addEventListener('DOMContentLoaded', function() {
  var barOptions_stacked = {
      title: {
          display:true,
          position:'top',
          text:'Hours Spent to Create Website',
      },
      tooltips: { enabled: true },
      hover :{ animationDuration:400 },
      scales: {
          xAxes: [{
              ticks: { beginAtZero:true, },
              scaleLabel:{ display:true, labelString:'Hours Worked', },
              gridLines: { },
              stacked: true
          }],
          yAxes: [{
              gridLines: { display:false, color: "#fff", zeroLineColor: "#fff", zeroLineWidth: 0 },
              stacked: true
          }]
      },
      legend:{ display:false },
  };
  var ctx = document.getElementById("myChart");
  var myChart = new Chart(ctx, {
      responsive:true,
      maintainAspectRatio: false,
      type: 'horizontalBar',
      data: {
          labels: ["Custom Built", "Site Builder"],
          datasets: [{
              label:'Hours for Required Content',
              data: [12, 2],
              backgroundColor: 'rgba(54, 162, 235, 0.8)',
              borderColor: 'rgba(54, 162, 235, 1)',
          },{
              label:'Hours for Added Features',
              data: [8.5, 0],
              backgroundColor: 'rgba(255, 70, 100, .8)',
              borderColor: 'rgba(255, 70, 100, 1)',
          },]
      },
      options: barOptions_stacked,
  });

  // Ensure proper initial rendering
  setTimeout(() => {
      myChart.resize();
  }, 50);
});

Combining these steps should fix the squished chart issue on initial load across all devices.

内容的提问来源于stack exchange，提问作者Matt Jones