Search code examples
javascriptchartsdrawingchart.js2

How do I change the colors on Y-Axis for values above, below zero? Chart.js 2.6


Using chart.js 2.6 Is there a way to dynamically change the bars in my chart for values above zero and below zero? The graph series data is being generated via a call to a method. Right now its just a random number generator but will be a DB call.

function changeWOWData(chart) {
    var datasets = chart.data.datasets;
    var labelLen = chart.data.labels.length;
    if (datasets[0]) {
        for (i = 0, len = datasets.length; i < len; i++) {
            try {
                for (j = 0, len = labelLen; j < len; j++) {
                    datasets[i].data[j] = getRandomInt(-100, 100);
                }

            } catch (e) {
                console.log(e.message);
            }
        }
    }
}

Chart looks like this:

enter image description here

I want the chart bars above zero to be blue, the bars below zero to be red.

Any/all replies appreciated. Thanks in advance!

Griff

** Edit ** Added the code from the answer below as such:

var myBarChart = new Chart(wowChart, {
    type: 'bar',
    data: wowData,
    plugins: [{
        beforeDraw: function (c) {
            var data = c.data.datasets[0].data;
            for (var i in data) {
                try {
                    var bar = c.data.datasets[0]._meta[0].data[i]._model;
                    if (data[i] > 0) {
                        bar.backgroundColor = '#07C';
                    } else bar.backgroundColor = '#E82020';

                } catch (ex) {
                    console.log(ex.message);
                }
                console.log(data[i]);
            }
        }
    }],
    options: wowOptions
});

Every other line of the console I see the data element along with the exception

enter image description here


Solution

  • You could accomplish that using the following chart plugin :

    plugins: [{
       beforeDraw: function(c) {
          var data = c.data.datasets[0].data;
          for (let i in data) {
             let bar = c.data.datasets[0]._meta['0'].data[i]._model;
             if (data[i] > 0) {
                bar.backgroundColor = '#07C';
             } else bar.backgroundColor = '#E82020';
          }
       }
    }]
    

    add this followed by your chart options

    ᴅᴇᴍᴏ

    var ctx = document.getElementById("canvas").getContext('2d');
    var myChart = new Chart(ctx, {
       type: 'bar',
       data: {
          labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
          datasets: [{
             label: 'LEGEND',
             data: [9, 14, -4, 15, -8, 10]
          }]
       },
       options: {},
       plugins: [{
          beforeDraw: function(c) {
             var data = c.data.datasets[0].data;
             for (let i in data) {
                let bar = c.data.datasets[0]._meta['0'].data[i]._model;
                if (data[i] > 0) {
                   bar.backgroundColor = '#07C';
                } else bar.backgroundColor = '#E82020';
             }
          }
       }]
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
    <canvas id="canvas" height="180"></canvas>