Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 142533

Chart.js, change color of specific ticks

$
0
0

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) enter image description here

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

Viewing all articles
Browse latest Browse all 142533

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>