[Chartjs]-.datasets is undefined when trying to access bars from chart.js

by

1👍

✅

Here is the complete example you want.

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
  
	//Creating a barchart with default values
	var myChart = new Chart(document.getElementById("myChart"), {
	"type": "bar",
	"data": {
		"labels": ["January", "February", "March", "April", "May", "June", "July"],
		"datasets": [{
			"label": "My First Dataset",
			"data": [65, 59, 80, 81, 56, 55, 40],
			"fill": false,
			"backgroundColor": ["#fb4d4d", "#fb9d4d", "#f8fb4d", "#98fb4d", "#4effee", "#4cb9f8", "#574cf8"],
			"borderColor": ["#fb4d4d", "#fb9d4d", "#f8fb4d", "#98fb4d", "#4effee", "#4cb9f8", "#574cf8"],
			"borderWidth": 1
		}]
	},
	"options": {
		"scales": {
			"yAxes": [{
				"ticks": {
					"beginAtZero": true
				}
			}]
		}
	}
	});
  
   //Getting the bar-chart existing values	  
   var bars = myChart.config.data.datasets[0];
   var data = bars.data;
   
   //Updating the existing value (object which holds value) 
   for (i = 0; i < data.length; i++) {
		var bgcolor = "";
		var brcolor = "";
	   
	   if (data[i] < 30) {
			bgcolor = "red";
			brcolor = "red";
	   } else if (data[i] < 50) {
			bgcolor = "orange";
			brcolor = "orange";
	   } else if (data[i] < 80) {
			bgcolor = "yellow";
			brcolor = "yellow";
	   } else {
			bgcolor = "green";
			brcolor = "green";
	   }
	   
	   bars.backgroundColor[i] = bgcolor;
	   bars.borderColor[i] = brcolor;
   }
   
   //Triggering the chart update in 3 seconds.
   setTimeout(function(){
	myChart.update();
   }, 3000);
   
</script>

1👍

your dataset was empty, was not being done as the example quoted

The correct way to do as the example you mentioned is:

var barChartData = {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [
        {
            label: '# of Votes',
                   data: [12, 19, 3, 5, 3, 3],
                   fillColor: "rgba(220,220,220,0.5)",
                   strokeColor: "rgba(220,220,220,0.8)",
                   highlightFill: "rgba(220,220,220,0.75)",
                   highlightStroke: "rgba(220,220,220,1)",
                   borderWidth: 1
        }
    ]
};

var ctx = document.getElementById('myChart').getContext('2d');
       window.myObjBar = new Chart(ctx).Bar(barChartData, {
          responsive : true
    });
       var bars = myObjBar.datasets[0].bars;
    for(i=0;i<bars.length;i++){
       var color="green";
       //You can check for bars[i].value and put your conditions here
       if(bars[i].value<3){
        color="red";
       }
       else if(bars[i].value<5){
        color="orange"

       }
       else if(bars[i].value<8){
        color="yellow"
       }
       else{
        color="green"
       }

       bars[i].fillColor = color;

    }
    myObjBar.update(); //update the cahrt

Here is an example working 🙂

Leave a comment