@gilbert
To create two x-axes labels using Chart.js, you can use the xAxes
property in the options object of your chart configuration. This property allows you to define multiple x-axes with their own labels.
Here is an example of how you can create two x-axes labels using Chart.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
var ctx = document.getElementById('myChart').getContext('2d'); var chart = new Chart(ctx, { type: 'bar', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June'], datasets: [{ label: 'Sales', data: [50, 60, 70, 80, 90, 100], backgroundColor: 'blue' }] }, options: { scales: { xAxes: [{ ticks: { beginAtZero: true }, scaleLabel: { display: true, labelString: 'Months' } }, { position: 'top', ticks: { beginAtZero: true }, scaleLabel: { display: true, labelString: 'Quarter 1' } }] } } }); |
In the above example, we have defined two x-axes within the scales
option of the chart configuration. The first x-axis is labeled 'Months' and the second x-axis is labeled 'Quarter 1'. The position attribute specifies the position of the second x-axis at the top of the chart.
You can customize the appearance and behavior of the x-axes further by modifying other properties within the xAxes
object.