Chart.js horizontalBar图表如何从自定义值而非零或数据最小值开始？

Got it! I’ve dealt with this exact need before when working with Chart.js horizontal bar charts. The key lies in configuring the value axis (which is the X-axis for horizontal bars) to use your custom starting value instead of defaulting to 0 or the data’s minimum. Here’s how to do it for both common Chart.js versions:

For Chart.js v2 (using horizontalBar type) #

In v2, horizontal bar charts use the horizontalBar chart type, and the value axis is the xAxes array. You’ll need to disable beginAtZero (since it overrides custom min values) and set your desired starting value via the min property:

const ctx = document.getElementById('your-chart-id').getContext('2d');
const horizontalBarChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
        labels: ['Product A', 'Product B', 'Product C'],
        datasets: [{
            label: 'Sales',
            data: [65, 80, 95],
            backgroundColor: 'rgba(75, 192, 192, 0.6)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            xAxes: [{
                beginAtZero: false, // Critical: disables the default zero start
                min: 50, // Your custom starting value goes here
                ticks: {
                    stepSize: 10 // Optional: controls interval between ticks
                }
            }]
        }
    }
});

For Chart.js v3+ (using bar with indexAxis: 'y') #

Chart.js v3+ removed the horizontalBar type—instead, you use the standard bar type and set indexAxis: 'y' to make it horizontal. The value axis is now just x (no longer an array):

const ctx = document.getElementById('your-chart-id').getContext('2d');
const horizontalBarChart = new Chart(ctx, {
    type: 'bar',
    indexAxis: 'y', // Enables horizontal bar layout
    data: {
        labels: ['Product A', 'Product B', 'Product C'],
        datasets: [{
            label: 'Sales',
            data: [65, 80, 95],
            backgroundColor: 'rgba(75, 192, 192, 0.6)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            x: {
                beginAtZero: false,
                min: 50, // Your custom starting value
                ticks: {
                    stepSize: 10 // Optional: adjust tick spacing as needed
                }
            }
        }
    }
});

Key Notes #

• If your custom min value is higher than some data points, those bars will be cut off (they’ll extend left of the axis start and won’t be visible). Make sure your starting value is ≤ the smallest data point if you want all bars fully displayed.
• You can also set a max value in the same axis config to lock the upper end of the scale, creating a fixed range for your chart.

内容的提问来源于stack exchange，提问作者Michael.D