0
258
ViewsHow to move tick marks above the x-axis in Chart.js
I am working on a chart in Chart.js and my x-axis looks like this:
I have already looked into documentation and GitHub and it doesn't seem possible to realign the far left label to the right and the far right label to the left a little. However, I am wondering if it is possible to have the tick marks going up from the x-axis instead of down?
·
Santiago Trujillo
2 answers
Answer question0
I don't believe this is possible in Chart.js as of now.
·
Santiago Trujillo
Report
0
You can use the mirror option in the ticks like so:
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
scales: {
x: {
ticks: {
mirror: true
}
}
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.js"></script>
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>
·
Santiago Trujillo
Report
Answer question