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.
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,
},
});