Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bar chart color depending on the value. #5302

Closed
malvarezap opened this issue Feb 28, 2018 · 9 comments · Fixed by #5780
Closed

Bar chart color depending on the value. #5302

malvarezap opened this issue Feb 28, 2018 · 9 comments · Fixed by #5780

Comments

@malvarezap
Copy link

malvarezap commented Feb 28, 2018

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
Copy link

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
Copy link
Member

etimberg commented Mar 3, 2018

@BVazquezAlvarez has the correct solutions

@etimberg etimberg closed this as completed Mar 3, 2018
@ilyaDegtyarenko
Copy link

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

@kluplau
Copy link

kluplau commented Jan 22, 2019

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
Copy link

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
Copy link

kluplau commented Jun 13, 2019

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
Copy link

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
Copy link

kluplau commented Jun 14, 2019

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

@am-awais
Copy link

am-awais commented Jun 14, 2019

yes

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants