Google Material Chart Column Chart (bar Chart) Custom Column Color Not Working
I want to draw a simple column chart in HTML-JavaScript using google chart.I have used Google materiel chart CDN to draw a column chart having 4 rows with 4 different colors. I hav
Solution 1:
Yaa, at last I made this one correct and exactly I wanted to be. Please see the code below, if you required sometime.
<html><head><scripttype="text/javascript"src="https://www.gstatic.com/charts/loader.js"></script><scripttype="text/javascript">
google.charts.load('visualization', '1.1', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
functiondrawChart() {
var data = google.visualization.arrayToDataTable([
['Class', 'Total',{role: 'style'}],
['A', 10,'color: #b0120a'],
['B', 30,'color: #004411'],
['C', 20,'color: #ffab91'],
['D', 30,'color: #004411']
]);
var options = {
isStacked: false,
title: 'Class wise total students',
};
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material'));
chart.draw(data, options);
}
</script></head><body><divid="columnchart_material"style="width: 100%; height: 100%;"></div></body></html>
I need to changed the definition of chart
here. From var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
to the modified one as var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material'));
. It's working now.
The chart is like ....
Post a Comment for "Google Material Chart Column Chart (bar Chart) Custom Column Color Not Working"