Chartjs-Change color of X axis values to multi color values – Chart.js

by

1👍

var myData = [
  ["id1","test 11111","AA",1.95],
  ["id2","test 2","BB",1.94],
  ["id3","test 3","CC",1.93],
  ["id4","test 4","DD",1.93],
  ["id5","test 5","EE",1.91],
  ["id6","test 6","FF",1.90],
  ["id7","test 7","GG",1.82],
  ["id8","test 8","HH",1.85],
  ["id9","test 9","II",1.83],
  ["id10","test 10","JJ",1.79]
];


var ctx = $("#c");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    datasets: [{
      label: '# of Votes',
      xAxisID:'modelAxis',
      data: myData.map((entry)=>entry[3])
    }]
  },
  options:{
    scales:{
      xAxes:[
        {
          id:'modelAxis',
          type:"category",
          ticks:{
            //maxRotation:0,
            autoSkip: false,
            callback:function(label, x2, x3, x4){
              return label;
            }
                   },
         labels:myData.map((entry=>entry[1]))
        },
        {
          id:'groupAxis',
          type:"category",
          gridLines: {
            display: false,
            drawBorder: false,
            drawOnChartArea: false,
            offsetGridLines: false
          },
          ticks:{
            padding:0,
            maxRotation:0,
            fontSize: 10,
            fontColor: '#FF9090',
            autoSkip: false,
            callback:function(label){
                return label;
            }
          },
          offset: true,
          labels:myData.map((entry=>entry[1]))

        },{
          id:'groupAxis2',
          type:"category",
          gridLines: {
            display: false,
            drawBorder: false,
            drawOnChartArea: false,
            offsetGridLines: false
          },
          scaleLabel:{ 
            padding: 10,
          },
          ticks:{
            padding:0,
            fontSize: 10,
            fontColor: '#AB64F4',
            maxRotation:0,
            autoSkip: false,
            callback:function(label){
                return label;
            }
          },
          offset: true,
          labels:myData.map((entry=>entry[1]))

        }
        ],
      yAxes:[{
        ticks:{
          beginAtZero:true
        }
      }]
    }
  }
});

Leave a comment