I have a chart that ticks are barely distinguishable.
Is there a way to target a specific ticks and change the color, font-size or background, to appear more visible?
Solution I could also set for, would be way to hide every tick that indicates hours but leave the tool-tip.
I've tried to push empty string in place of time, but that unfortunately also disables tool-tips and there is no way to tell the time of particulate value.
( chart.js ver2.8.0)
CODE:
var chartDatesArray = ["NOV 25","01:00","02:00","03:00"... "23:00","Nov 26"];
var chartCountArray = [10,20,30,40...50,60];
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: chartDatesArray,
datasets: [
{
data: chartCountArray,
backgroundColor: gradient,
borderColor: "rgb(27,163,198)",
fill: true,
lineTension: 0,
radius: 1,
borderWidth: 2,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
},
],
},
options: {
scales: {
xAxes: [{
ticks: {
display: true,
fontSize: 12,
},
gridLines: {
display: true,
drawBorder: false,
}
}],
yAxes: [{
ticks: {
precision: 0,
display: true,
fontSize: 12,
beginAtZero: true
},
gridLines: {
display: true,
drawBorder: true,
}
}]
},
legend: {
display: false,
labels: {
fontSize: 12,
},
},
tooltips: {
enabled: true,
intersect: false,
},
display: true,
responsive: true,
maintainAspectRatio: false,
},
});
I have a chart that ticks are barely distinguishable.
Is there a way to target a specific ticks and change the color, font-size or background, to appear more visible?
Solution I could also set for, would be way to hide every tick that indicates hours but leave the tool-tip.
I've tried to push empty string in place of time, but that unfortunately also disables tool-tips and there is no way to tell the time of particulate value.
( chart.js ver2.8.0)
CODE:
var chartDatesArray = ["NOV 25","01:00","02:00","03:00"... "23:00","Nov 26"];
var chartCountArray = [10,20,30,40...50,60];
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: chartDatesArray,
datasets: [
{
data: chartCountArray,
backgroundColor: gradient,
borderColor: "rgb(27,163,198)",
fill: true,
lineTension: 0,
radius: 1,
borderWidth: 2,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
},
],
},
options: {
scales: {
xAxes: [{
ticks: {
display: true,
fontSize: 12,
},
gridLines: {
display: true,
drawBorder: false,
}
}],
yAxes: [{
ticks: {
precision: 0,
display: true,
fontSize: 12,
beginAtZero: true
},
gridLines: {
display: true,
drawBorder: true,
}
}]
},
legend: {
display: false,
labels: {
fontSize: 12,
},
},
tooltips: {
enabled: true,
intersect: false,
},
display: true,
responsive: true,
maintainAspectRatio: false,
},
});
- Please provide the values for chartDatesArray,chartCountArray so we can see the actual working – asimshahiddIT Commented Nov 26, 2019 at 14:30
- I've edited my question- chartDatesArray contains string representing every hour between 01:00 - 23:00, and chartCountArray contains a number >= 0. hope that helps – Jacob Zielinski Commented Nov 26, 2019 at 14:37
- for chart.js 3.0 and > use this answer: stackoverflow./questions/66216352/… – Randy Welt Commented Jul 28, 2021 at 21:05
- for chartjs 3.0 and higher use this answer: stackoverflow./questions/66216352/… – Randy Welt Commented Jul 28, 2021 at 21:06
3 Answers
Reset to default 8you can use a array for xAxes fontColor see example:
<canvas id="graph-canvas" width="800" height="400"></canvas>
<script>
var canvas = document.getElementById('myChart');
var data = {
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [
{
label: "My First dataset",
backgroundColor:
[ "rgba(255,99,132,0.4)",
"rgba(255,99,132,0.4)",
"rgba(255,99,132,0.4)",
"rgba(25,25,255,0.4)",
"rgba(25,25,255,0.4)",
"rgba(25,25,255,0.4)"],
hoverBorderColor: "rgba(255,99,132,1)",
data: [65, 59, 20, 81, 56, 55],
}
]
};
var option = {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
fontColor: 'red'
},
}],
xAxes: [{
ticks: {
fontColor:['green','red','blue','yellow','green','red'],
callback: function(value, index, values) {
if(index === 3) {
return '**'+value+'**';
}
else {
return value;
}
}
},
}]
}
};
var myBarChart = Chart.Line(canvas,{
data:data,
options:option
});
</script>
Here is a fiddle
Hopefully this will prove useful for someone in the future but this is the way I was able to do it:
scales: {
x: {
type: 'linear',
position: 'bottom',
title: {
text: 'Minutes from start',
display: true
}
},
y: {
type: 'linear',
display: true,
position: 'left',
suggestedMax: 14,
title: {
text: 'pH',
display: true
},
ticks: {
color: (c) => {if(c['tick']['value'] == 7) return 'red'; else return 'black';}, // this here
},
},
In the ticks section of a scale you can create a function in the color property that'll return a color based on the tick
For Chart JS 3.5.1 I've got this in my config:
{
options: {
scales: {
x: {
ticks: {
color: ['black', 'black', 'blue']
}
}
}
}
}
I'm using TypeScript and it looks like the typing is incorrect so I had to // @ts-igone it so it can accept a list of strings.
Here is the result:
result of providing a list of strings for color