Menu
Does anyone have any ideas on how I can change the colours of the ticks on the y axis of a bar chart dynamically?
I can change the colour of all the ticks but can't seem to find a way to change them individually like the picture below.
Any tips would be appreciated.
bar chart
554
In the upcomming release of the V3 version of the lib you can do this with the scriptable options by passing a function to the color key in the tick config instead of a color.
const colors = ['red', 'blue', 'yellow', 'green'];
var 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: {
color: (c) => {
return colors[c.index % colors.length]
}
}
},
y: {
ticks: {
color: (c) => {
return colors[c.index % colors.length]
}
}
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-beta.10/chart.js" integrity="sha512-7igYTuENB1pHNsZ/SyzMYrcJAmRCk084yVOsxNNCQAdX1wSYvCeBOgSOMC6wUdKMO76kCJNOpW4jY3UW5CoBnA==" crossorigin="anonymous"></script>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
