Dynamic background color (callback)

Hi there,

I got a case, where I need to dynamically set colors of single bars depending on the data value.

I would suggest to use a callback like this:

datasets: [{
  label: '# of Votes',
  data: [ 10, 21, 22 ],
  backgroundColor: function( value ) { // Callback instead of static color 
    if ( value < 30 ) {
      return 'red'; 
    }
    return 'green';
  }
}]

[haschu]

Turns out that, after diving more into it, using the plugin system is way more elegant.

For anybody who comes across the same problem, this does the job:

    Chart.pluginService.register({
        beforeUpdate: function( chartInstance ) {
            chartInstance.data.datasets.forEach( function( dataset ) {
                dataset.backgroundColor = dataset.data.map( function( data ) {
                    if ( typeof dataset.backgroundColor === "function" ) {
                        return dataset.backgroundColor.call( this, data );
                    }
                    return dataset.backgroundColor;
                });
            });
        }
    });

[haschu]

Sure, here you go: 🙂 https://plnkr.co/edit/1AbeNG74cpxo0FSsw93q?p=preview