如何水平向xAxes标签添加填充

Question

我在chart.js中使用条线混合图表。我只是想从0开始图，但是它是从另一个值开始。可以将xAxes标签移到左侧，因为从此折线图开始的条形图从未从0开始，也不是从0开始的。我只想从0开始折线图。

这是我的代码：

var chart2 = new Chart(ctx2, {
    type: "bar",
    data: {
        labels: [20, 15, 16, 78, 45],
        datasets: [
            {
                type: 'bar',
                label: 'Expenses',
                data: ["", 11, 55, 56, 56],
                backgroundColor: 'rgba(245,148,154,1)',
                borderColor: 'rgba(245,148,154,1)'
            },
            {
                type: "line",
                label: 'Assets',
                data: [12, 120, 566, 56, 21],
                backgroundColor: 'rgba(220,6,21,1)',
                borderColor: 'rgba(220,6,21,1)',
                borderWidth: 2,
                // pointBorderColor: 'rgba(75,72,192,1)',
                // pointBackgroundColor: '#fff',
                pointBorderWidth: 1,
                pointHoverRadius: 1,
                // pointHoverBorderColor: 'rgba(220,220,220,1)',
                pointHoverBorderWidth: 0,
                pointRadius: 0,
                pointHitRadius: 10
            }
        ]
    },
    options: {
        // stepSize: 10,

        legend: {
            display: false,
        },
        scales: {
            xAxes: [
                {
                    barThickness: 5,
                    ticks: {
                        maxTicksLimit: 8,
                        minTicksLimit: 3,
                        beginAtZero: true,
                        mirror: true,
                        //make the font slightly larger
                        padding: 10 //this move vertically

                    },
                    gridLines: {
                        color: "rgba(0, 0, 0, 0)",
                    }
                }],
            yAxes: [{
                gridLines: {
                    borderDash: [8, 4]
                },
                scaleLabel: {
                    display: true,
                    labelString: 'Retirement Assets ($)'
                },

                ticks: {
                    beginAtZero: true,
                    // stepSize: 200000,
                    scaleBeginAtZero: true,
                    maxTicksLimit: 10,
                    minTicksLimit: 5,
                    callback: function (value) {
                        var ranges = [{
                            divider: 1e6,
                            suffix: 'M'
                        },
                        {
                            divider: 1e3,
                            suffix: 'k'
                        }
                        ];

                        function formatNumber(n) {
                            for (var i = 0; i < ranges.length; i++) {
                                if (n >= ranges[i].divider) {
                                    return (n / ranges[i].divider).toString() + ranges[i].suffix;
                                }
                            }
                            return n;
                        }
                        return '$ ' + formatNumber(value);
                    }
                }
            }],
        },
        tooltips: {
            intersect: false,
            callbacks: {
                enabled: true,
                label: function (t, d) {
                    var xLabel = d.datasets[t.datasetIndex].label;
                    var yLabel = t.yLabel;
                    // if line chart
                    if (t.datasetIndex === 0) return xLabel + ': ' + retiremnetAssests(yLabel);
                    // if bar chart
                    else if (t.datasetIndex === 1) return xLabel + ':' + retiremnetAssests(yLabel);
                },

                // label: function (tooltipItem) {
                //     console.log(chart2.type);
                //     return ("Assets" + retiremnetAssests(Number(tooltipItem.yLabel)));
                // },
                labelTextColor: function (tooltipItem, chart) {
                    return '#fff';
                },
                title: function (tooltipItem, data) {
                    return (" At age:" + tooltipItem[0].xLabel);
                }
            },


        },
        title: {
            display: true,
            text: 'Age (Years)',
            position: 'bottom'
        }
    },
    animation: {
        duration: 1000
    }
});