BackdropColor scriptable #9981
Answered
by
LeeLenaleee
pacomorcillo
asked this question in
Q&A
-
I have been reading the docs and found out that backdropColor is an scriptable field within the ticks configuration ( https://www.chartjs.org/docs/latest/axes/styling.html#major-tick-configuration ), but I haven't been able to find a way to make it work. Could you please provide me with an example with a valid script returning a couple of different colors? |
Beta Was this translation helpful? Give feedback.
Answered by
LeeLenaleee
Dec 13, 2021
Replies: 1 comment 1 reply
-
You need to turn const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'orange'
}
]
},
options: {
scales: {
x: {
ticks: {
color: 'white',
showLabelBackdrop: true,
backdropColor: (ctx) => (ctx.tick.label)
}
},
y: {
ticks: {
color: 'white',
showLabelBackdrop: true,
backdropColor: (ctx) => (ctx.tick.value > 10 ? 'green' : 'red')
}
}
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options); |
Beta Was this translation helpful? Give feedback.
1 reply
Answer selected by
pacomorcillo
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
You need to turn
showLabelBackdrop
totrue
as well.