Vue-Chart.js图表未从零点起始问题求助及代码示例

The issue you’re running into is that Chart.js automatically adjusts the y-axis scale to fit the range of your dataset by default—this can make the axis start above zero instead of at the origin. To fix this, you just need to explicitly force the y-axis to start at zero using chart options.

Step 1: Add Axis Configuration to Your Parent Component #

In the page component that includes the datepicker and your chart, define or update the options object to include the y-axis setting:

// Inside your page component's data section
data() {
  return {
    periodStart: null,
    // ... other existing data properties
    chartOptions: {
      scales: {
        y: {
          beginAtZero: true // This forces the y-axis to start at 0
        }
      }
    }
  };
}

Then pass this options object to your chart component in the template:

<your-chart-component :chart-data="yourChartData" :options="chartOptions" />

Note for Older Chart.js Versions (v2) #

If you’re using Vue-Chart.js v2 (which depends on Chart.js v2), the scale syntax is a bit different:

chartOptions: {
  scales: {
    yAxes: [
      {
        ticks: {
          beginAtZero: true
        }
      }
    ]
  }
}

Check the Result #

After adding this configuration, your bar chart’s y-axis should now start at zero, giving you a consistent, accurate visualization of your data no matter the range of your dataset.

内容的提问来源于stack exchange，提问作者Olga B