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 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
}
}]
}
}
});
