JSFiddle - React, Tailwind, and code Playground

by Christian Bonato

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>

JavaScript

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,152,0.4)",
            "rgba(255,99,132,0.4)",
            "rgba(25,25,200,0.4)",
            "rgba(25,25,255,0.8)",
            "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: ['green','green','red','blue','yellow','green','red','red','red','red']
                },
            }],
          xAxes: [{
                ticks: {
                    fontColor:['green','red','blue','yellow','green','red'],
                    callback: function(value, index, values) {
                    if(index === 3) {
                      return '<b>'+value+'</b>';
                    } 
                    else {
                        return value;
                        }
                    }
                },
            }]
  }
};

var myBarChart = Chart.Line(canvas,{
	data:data,
  options:option
});