Chart.js: Bar chart color depending on the value.

[malvarezap]

Hello,

I'm doing a bar chart and I'd like that the bar with positive values had green color and red the negative values. I guess there must be a not so complicated solution for this because it's a very logical request, but I can't find it.

`var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: info.dates,
datasets: [{
label: info.label + ' ' + info.unit,
data: info.numbers,
backgroundColor: 'green',
borderWidth: 0,
fill: true,
pointRadius:0,
pointHitRadius: 10
}]
},
options: {
scales: {

            xAxes:[{
                ticks:{

                },
                gridLines:{
                    tickMarkLength: 10,
                    drawBorder: false,
                    display: false,
                } 
            }],
            yAxes:[{
                gridLines:{

                    drawBorder: false,
                    display: false,
                },
                ticks: {
                    beginAtZero:true, 
                }
            }]
        }
    }
});

`

Thanks a lot.

[BVazquezAlvarez]

You can color each individual bar using an Array in backgroundColor.

Just loop through your elements and color each bar accordingly:

Fiddle-> https://jsfiddle.net/uq99110j/6/

[etimberg]

@BVazquezAlvarez has the correct solutions

[ilyaDegtyarenko]

If multiple datasets? In one one color of bar, in another another.

[kluplau]

The solution from @BVazquezAlvarez doesn't tell you what the green means, because there is only a single dataset, and therefore a single legend.

You have to do it with two datasets, filter the data based on how the coloring should work, and then stack it like this: https://jsfiddle.net/Blueblau/wqs4c60o/

[am-awais]

The solution from @BVazquezAlvarez doesn't tell you what the green means, because there is only a single dataset, and therefore a single legend.

You have to do it with two datasets, filter the data based on how the coloring should work, and then stack it like this: https://jsfiddle.net/Blueblau/wqs4c60o/

getting this error!(i am using chartsJS with ng charts for angular)
typeerror cannot read property 'getcontext' of null

[kluplau]

getting this error!(i am using chartsJS with ng charts for angular)
typeerror cannot read property 'getcontext' of null

It seems to be an internal error. getContext is a function on the canvas element. Can you share your code on JSfiddle or somewhere similar? As simple as possible where the problem can blev reproduced.

[am-awais]

TS:
`
ngOnInit() {

var myData = [2, 10, 5, 2, 20, 30, 9];

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
  // The type of chart we want to create
  type: 'bar',

  // The data for our dataset
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      label: "Monthly goal reached",
      backgroundColor: "green",
      data: myData.map(function (value) {
        return value >= 10 ? value : null
      }),
    },
    {
      label: "Monthly goal not reached",
      backgroundColor: "red",
      data: myData.map(function (value) {
        return value < 10 ? value : null
      }),
    }
    ]
  },

  // Configuration options go here
  options: {
    scales: {
      xAxes: [{
        stacked: true
      }],
      yAxes: [{
        stacked: true
      }]
    }

  }
});`

Error:
Property 'getContext' does not exist on type 'HTMLElement'

[kluplau]

Do you have a canvas element with id myChart in your HTML?

[am-awais]

yes

<canvas class="chart-box" id="myChart"></canvas>