[Chartjs]-ChartJS – Override Attributes (AngularJS)

by

4👍

Refer to the source code:

function getChartData (type, scope) {
  var colors = getColors(type, scope);
  return Array.isArray(scope.chartData[0]) ?
    getDataSets(scope.chartLabels, scope.chartData, scope.chartSeries || [], colors, scope.chartDatasetOverride) :
    getData(scope.chartLabels, scope.chartData, colors, scope.chartDatasetOverride);
}
...
function getData (labels, data, colors, datasetOverride) {
  var dataset = {
    labels: labels,
    datasets: [{
      data: data,
      backgroundColor: colors.map(function (color) {
        return color.pointBackgroundColor;
      }),
      hoverBackgroundColor: colors.map(function (color) {
        return color.backgroundColor;
      })
    }]
  };
  if (datasetOverride) {
    angular.merge(dataset.datasets[0], datasetOverride);
  }
  return dataset;
}

So if your data is just an array of number, datasetOverride should be an object instead of array:

chart.datasetOverride = {
  borderWidth: 10, 
  backgroundColor: ["#f00", "#00f", "#000"],
  hoverBackgroundColor: ["#f0f", "#0ff", "#ff0"]
};

Fiddle

Note: For colors only, you can pass an array of objects represent color to chart-colors but it’s strange that they take pointBackgroundColor as backgroundColor and backgroundColor as hoverBackgroundColor:

chart.colors = [
  {
    backgroundColor: "#0f0",
    pointBackgroundColor: "#000",
  },
  {
    backgroundColor: "#f0f",
    pointBackgroundColor: "#00f",
  },
  {
    backgroundColor: "#ff0",
    pointBackgroundColor: "#f00",
  },
];

Fiddle

1👍

Would something like this work?

  chart.datasetOverride = [
    {fillColor: '#ccc' }, 
    {strokeColor: '#ddd' },
    {highlightFill: '#fff' } 
  ];

Taken from https://stackoverflow.com/a/28647813/1772933

1👍

For anyone still looking for how to override default chart colors:

Under ChartJsProvider.setOptions, simply add

chartColors: [‘#000’, ‘#0000ff’, ‘#ee82ee’]

Note: Be mindful of what color types you use e.g (HEX or RGBA), this option only works for HEX colors

See below for reference:

angular.module('chartDemo', ['chart.js'])
    .config(['ChartJsProvider', function (ChartJsProvider) {
    // Configure all charts
    ChartJsProvider.setOptions({
    chartColors: ['#000', '#0000ff', '#ee82ee'],
      //animation: false,
      //responsive: false
    });
  }])
    .controller('MainController', MainController);

For a working Fiddle example, see here

For further reading, check out angular-chart.js documentation here

Leave a comment