How to align the 0s of two y-axes on chart.js?

Viewed 38

I use the chart.js plugin to make JavaScript charts. The link of the plugin: https://www.chartjs.org/ I would like the zeros of the Y-axes to be aligned without the scales being the same. Put the two zeros at the same level without the curves having the same scales.

Here is a picture of the chart.

Here a picture of the chart

Here is the code for the graph below:

let chart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: charts.bar.months.short,
            datasets: [
                {},
                {},
                {
                    label: '{{ trans._("TREASURY")|ucfirst }}',
                    backgroundColor: 'rgba(0,0,0,0)',
                    borderColor: charts.colors['secondary'],
                    data: treasury.n,
                    type: 'line',
                    yAxisID: 'treasury',
                    lineTension: 0,
                    pointHitRadius:10
                },
            ]
        },
        options: {
            tooltips: charts.bar.tooltips,
            maintainAspectRatio: false,
            legend: {
                display:false
            },
            scales: {
                xAxes: [{
                    barPercentage: 0.8,
                    ticks: {
                        fontSize:charts.fontSize
                    }
                }],
                yAxes: [{
                    id:"turnover",
                    position: 'left',
                    ticks: {
                        fontSize:charts.fontSize,
                        beginAtZero: true,
                        callback: formatAxisAmountTruncate,
                        fontColor: charts.colors.success,
                        fontStyle: 'bold',
                    }
                }, {
                    id:"charges",
                    position: 'left',
                    ticks: {
                        fontSize:charts.fontSize,
                        beginAtZero: true,
                        callback: formatAxisAmountTruncate,
                        fontColor: charts.colors.warning,
                        fontStyle: 'bold',
                    }
                }, {
                    id:"treasury",
                    position: 'right',
                    ticks: {
                        fontSize:charts.fontSize,
                        beginAtZero: true,
                        callback: formatAxisAmountTruncate,
                        fontColor: charts.colors.secondary,
                        fontStyle: 'bold',
                    },
                    gridLines: {
                        display:false
                    }
                }]
            }
        }
    });
0 Answers
Related