0👍
You can set the tick color as stated in the docs:
new Chart(ctx, {
type: "line",
data: data,
options: {
scales: {
yAxes: [{
ticks: {
fontColor: "white",
fontSize: 18,
}
}],
xAxes: [{
ticks: {
fontColor: "white",
fontSize: 14,
}
}]
}
}
});
See https://www.chartjs.org/docs/latest/general/colors.html to see what formats you can define colors in.
EDIT: I now see that you wanted to set colors for specific labels. As far as I can find, there’s no way to do that.
0👍
As far as I know this is not possible (at least for now, version 2.9, maybe in upcoming releases).
ticks.fontColor
is neither scriptable nor indexable.
One thing you could do is coloring the gridlines above the ticks.
scales: {
xAxes: [{
gridLines: {
color: ['#F00', '#0F0', '#F00', '#F00']
}]
}
}
You can hard-code the colors or use a function to give every grid line a color.
- [Chartjs]-Building Multiple Charts Using Chart JS in an Angular Application
- [Chartjs]-Angular 5 and chart.js ts error
-1👍
There are 4 special global settings that can change all of the fonts on the chart. These options are in Chart.defaults.global. The global font settings only apply when more specific options are not included in the config.
For example, in this chart the text will all be red except for the labels in the legend.
Chart.defaults.global.defaultFontColor = 'red';
let chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
legend: {
labels: {
// This more specific font property overrides the global property
fontColor: 'black'
}
}
}
});
- [Chartjs]-How to add tooltips to chart.js graph
- [Chartjs]-How do I make line charts overlay over bar charts in chartjs