[Chartjs]-Chart.js, change color of specific ticks

by

8👍

✅

you 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

3👍

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

1👍

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

Leave a comment