locked
ChartJS Bar Graph - Background Color based on dataset value RRS feed

  • Question

  • User-973788521 posted

    Hello, I have  ChartJS bar graph and could use some help. When the data is passed into <g class="gr_ gr_102 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins doubleReplace replaceWithoutSep" id="102" data-gr-id="102">dataset</g>, I need the background color to be determined based on the value. I have 12 values always. If the value is >30 or 31-60 or >=61, I want the background color to be set accordingly. Example: review each value and set background color based on value. If 1st value = 29, set color accordingly if the second value is 31, set color accordingly, etc. 

    I've tried several different ways, and this one seems like it would work, but it's not... any ideas?

    try {
    		//bar chart
    		let ctx = document.getElementById("refTimes");
    		if (ctx) {
    			ctx.height = 250;
    			let bg;
    			let a = [31, 59, 49, 51, 25, 61, 31, 30, 0, 0, 0, 0];
    			for (let index = 0; index < a.length; ++index) {
    				let value = a[index];
    				if (value < 30) {
    					bg = "rgba(77, 166, 255, 0.5)";
    				} else if ((value > 31) && (value <= 60)) {
    					bg = "rgba(218, 165, 32, 0.5)";
    				} else if (value >= 61) {
    					bg = "rgba(175, 0, 42, 0.5)";
    				}
    			}
    			let myChart = new Chart(ctx, {
    				type: "bar",
    				defaultFontFamily: "Poppins",
    				data: {
    					labels: jsVarMonths,
    					datasets: [
    						{
    							label: "Month-to-Date Totals",
    							data: [31, 59, 49, 51, 25, 61, 31, 30, 0, 0, 0, 0],
    							borderColor: "rgba(0, 123, 255, 0.9)",
    							borderWidth: "0",
    							backgroundColor: bg,
    							fontFamily: "Poppins"
    						}]
    				},
    				options: {
    					legend: {
    						position: "top",
    						labels: {
    							fontFamily: "Poppins"
    						}
    
    					},
    					scales: {
    						xAxes: [{
    							ticks: {
    								fontFamily: "Poppins"
    
    							}
    						}],
    						yAxes: [{
    							ticks: {
    								beginAtZero: true,
    								fontFamily: "Poppins"
    							}
    						}]
    					}
    				}   
    			});
    		}
    	} catch (error) {
    		console.log(error);
    	}

    Monday, August 20, 2018 11:14 PM

Answers

  • User1724605321 posted

    Hi doctork32,

    Code below is for your reference :

    Html:

    <canvas id="myChart" height="150"></canvas>
    

    JS:

    var chartColors = {
      color1: 'rgba(77, 166, 255, 0.5)',
      color2: 'rgba(218, 165, 32, 0.5)',
      color3: 'rgba(175, 0, 42, 0.5)'
    };
    
    var ctx = document.getElementById("myChart").getContext("2d");
    var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['value 1', 'value 2', 'value 3', 'value 4'],
        datasets: [{
          label: 'Dataset 1',
          backgroundColor: [
            chartColors.color1,
            chartColors.color1,
            chartColors.color1,
            chartColors.color1
          ],
          data: [29, 57, 65, 42]
        }],
      }
    });
    
    var colorChangeValue = 50; //set this to whatever is the deciding color change value
    var dataset = myChart.data.datasets[0];
    for (var i = 0; i < dataset.data.length; i++) {
      if (dataset.data[i] < 30) {
        dataset.backgroundColor[i] = chartColors.color1;
      }
      else if ((dataset.data[i] > 31) && (dataset.data[i] <= 60)){
        dataset.backgroundColor[i] = chartColors.color2;
      }
      else{
       dataset.backgroundColor[i] = chartColors.color3;
      }
    }
    myChart.update();
    

    Best Regards,

    Nan Yu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, August 22, 2018 2:07 AM

All replies

  • User1724605321 posted

    Hi doctork32,

    Code below is for your reference :

    Html:

    <canvas id="myChart" height="150"></canvas>
    

    JS:

    var chartColors = {
      color1: 'rgba(77, 166, 255, 0.5)',
      color2: 'rgba(218, 165, 32, 0.5)',
      color3: 'rgba(175, 0, 42, 0.5)'
    };
    
    var ctx = document.getElementById("myChart").getContext("2d");
    var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['value 1', 'value 2', 'value 3', 'value 4'],
        datasets: [{
          label: 'Dataset 1',
          backgroundColor: [
            chartColors.color1,
            chartColors.color1,
            chartColors.color1,
            chartColors.color1
          ],
          data: [29, 57, 65, 42]
        }],
      }
    });
    
    var colorChangeValue = 50; //set this to whatever is the deciding color change value
    var dataset = myChart.data.datasets[0];
    for (var i = 0; i < dataset.data.length; i++) {
      if (dataset.data[i] < 30) {
        dataset.backgroundColor[i] = chartColors.color1;
      }
      else if ((dataset.data[i] > 31) && (dataset.data[i] <= 60)){
        dataset.backgroundColor[i] = chartColors.color2;
      }
      else{
       dataset.backgroundColor[i] = chartColors.color3;
      }
    }
    myChart.update();
    

    Best Regards,

    Nan Yu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, August 22, 2018 2:07 AM
  • User-973788521 posted

    “You have shovels for hands.” – Thank you for lending them to me to dig through this problem to figure it out why and explain it to others.

    Much appreciated. Excellent work!

    Wednesday, August 22, 2018 4:51 PM