javascriptchartsgoogle-visualizationgoogle-barchart

Colouring of stacked bar charts using Google Chart API

I have a stacked bar chart where I need to color as well as annotate the bars.

I am successful in annotating of the bars but I am unable to color the first half with yellow color and second half with green color. Could anyone throw light on this

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
google.charts.load("current", {
	packages: ["corechart"]
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

var bar_chart_data = [
	["Material", "Cost", "Profit", { role: 'style' },{ role: 'style' }],
	["A", 100, 25, 'color: #F9F528','color: #0ACB53'],
	["B", 4.2, 1.764, 'color: #F9F528','color: #0ACB53'],
	["C", 110, 46.199999999999996, 'color: #F9F528','color: #0ACB53'],
	["D", 7.56, 3.1752, 'color: #F9F528','color: #0ACB53'],
	["E", 4.24, 1.7808, 'color: #F9F528','color: #0ACB53'],
	["F", 0.8, 0.336, 'color: #F9F528','color: #0ACB53'],
	["G", 2, 0.84, 'color: #F9F528','color: #0ACB53'],
	["H", 0.8, 0.336, 'color: #F9F528','color: #0ACB53'],
]

	var data = google.visualization.arrayToDataTable(bar_chart_data);

	var view = new google.visualization.DataView(data);
	view.setColumns([0, 1, {
			calc: "stringify",
			sourceColumn: 1,
			type: "string",
			role: "annotation"
		},
		2, {
			calc: "stringify",
			sourceColumn: 2,
			type: "string",
			role: "annotation"
		}
	]);

	var options = {
		title: "Live individual material cost break-up (%)",
		width: 600,
		height: 400,
		bar: {
			groupWidth: "95%"
		},
		legend: {
			position: "none"
		},
		isStacked: 'percent',
        hAxis: {
                  title: 'Percentage',
                  textStyle: {
                     fontSize: 8,
                     fontName: 'Muli',
                     bold: false,
                  },
                  
                  titleTextStyle: {
                     fontSize: 12,
                     fontName: 'Muli',
                     bold: true,
                  }
               },
               
               vAxis: {
                  title: 'Material',
                  textStyle: {
                     fontSize: 10,
                     bold: false
                  },
                  titleTextStyle: {
                     fontSize: 12,
                     bold: true
                  }
               }, 

	};
    var chart = new google.visualization.BarChart(document.getElementById("material_bar_chart"));
    chart.draw(view, options);
}

</script>
  </head>
  <body>
    <div id="material_bar_chart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Solution

  • just need to include the style columns,
    in your data view column definitions... 

    view.setColumns([0, 1, {
        calc: "stringify",
        sourceColumn: 1,
        type: "string",
        role: "annotation"
    }, 3,  // <-- include style column
    2, {
        calc: "stringify",
        sourceColumn: 2,
        type: "string",
        role: "annotation"
    }, 4  // <-- include style column
]);

    see following working snippet... 

    <html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
google.charts.load("current", {
	packages: ["corechart"]
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

var bar_chart_data = [
	["Material", "Cost", "Profit", { role: 'style' },{ role: 'style' }],
	["A", 100, 25, 'color: #F9F528','color: #0ACB53'],
	["B", 4.2, 1.764, 'color: #F9F528','color: #0ACB53'],
	["C", 110, 46.199999999999996, 'color: #F9F528','color: #0ACB53'],
	["D", 7.56, 3.1752, 'color: #F9F528','color: #0ACB53'],
	["E", 4.24, 1.7808, 'color: #F9F528','color: #0ACB53'],
	["F", 0.8, 0.336, 'color: #F9F528','color: #0ACB53'],
	["G", 2, 0.84, 'color: #F9F528','color: #0ACB53'],
	["H", 0.8, 0.336, 'color: #F9F528','color: #0ACB53'],
]

	var data = google.visualization.arrayToDataTable(bar_chart_data);

	var view = new google.visualization.DataView(data);
	view.setColumns([0, 1, {
			calc: "stringify",
			sourceColumn: 1,
			type: "string",
			role: "annotation"
		}, 3,  // <-- include style column
		2, {
			calc: "stringify",
			sourceColumn: 2,
			type: "string",
			role: "annotation"
		}, 4  // <-- include style column
	]);

	var options = {
		title: "Live individual material cost break-up (%)",
		width: 600,
		height: 400,
		bar: {
			groupWidth: "95%"
		},
		legend: {
			position: "none"
		},
		isStacked: 'percent',
        hAxis: {
                  title: 'Percentage',
                  textStyle: {
                     fontSize: 8,
                     fontName: 'Muli',
                     bold: false,
                  },
                  
                  titleTextStyle: {
                     fontSize: 12,
                     fontName: 'Muli',
                     bold: true,
                  }
               },
               
               vAxis: {
                  title: 'Material',
                  textStyle: {
                     fontSize: 10,
                     bold: false
                  },
                  titleTextStyle: {
                     fontSize: 12,
                     bold: true
                  }
               }, 

	};
    var chart = new google.visualization.BarChart(document.getElementById("material_bar_chart"));
    chart.draw(view, options);
}

</script>
  </head>
  <body>
    <div id="material_bar_chart" style="width: 900px; height: 500px;"></div>
  </body>
</html>