Chartjs-Having different colors per bar with angular charts chart.js v2

by

1👍

If you are using this directive https://jtblin.github.io/angular-chart.js/, try the following: 

this.color = [
  { backgroundColor: [
    '#DCDCDC', // light grey
    '#F7464A', // red
    '#46BFBD', // green
  ]};

This is from code review of the directive’s convertColor and get color functions.

Line 238: 

function convertColor (color) {
  if (typeof color === 'object' && color !== null) return color;
  if (typeof color === 'string' && color[0] === '#') return getColor(hexToRgb(color.substr(1)));
  return getRandomColor();
}

Line 249:

function getColor (color) {
  return {
    backgroundColor: rgba(color, 0.2),
    ...
  };`
}

And ChartJS’s bar graph sample (http://www.chartjs.org/docs/#bar-chart-data-structure). 

var data = {
    ...
    datasets: [
        {
            ...
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            ...
        }
    ]
};

(And possibly an unwarranted hunch.)

Leave a comment