Material Axis Format Example

An example of a Google Material Chart with Axis Formats.

by bgmort

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

CSS

html {
	/* background-color: #222; */
}

JavaScript

google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
	 ['Date', 'Positive', 'Negative', 'Neutral'],
["2018-10-11",0,4,7],
["2018-10-12",0,14,3],
["2018-10-13",1,14,6],
["2018-10-14",2,10,7],
["2018-10-15",0,5,3],
["2018-10-16",2,11,8],
["2018-10-17",1,10,5],
["2018-10-18",1,14,1],
["2018-10-19",0,15,0],
["2018-10-20",0,9,0],
["2018-10-21",1,18,0],
["2018-10-22",0,4,0],
["2018-10-23",0,5,0],
["2018-10-24",0,9,0],
["2018-10-25",1,14,0],
["2018-10-26",2,5,2],
["2018-10-27",0,15,0],
["2018-10-28",0,5,0],
["2018-10-29",1,9,0],
["2018-10-30",0,8,0],
["2018-10-31",0,7,0],
["2018-11-01",0,6,1],
["2018-11-02",1,8,0],
["2018-11-03",2,6,1],
["2018-11-04",1,17,0],
["2018-11-05",1,5,2],
["2018-11-06",2,10,1],
["2018-11-07",3,9,0],
["2018-11-08",15,106,12],
["2018-11-09",6,30,6],
["2018-11-10",2,36,5],
["2018-11-11",7,46,11],
["2018-11-12",7,57,12],
["2018-11-13",0,11,2],
["2018-11-14",1,8,0],
["2018-11-15",2,5,0],
["2018-11-16",0,9,2],
["2018-11-17",0,1,0],
["2018-11-18",1,5,0],
["2018-11-19",1,9,2],
["2018-11-20",2,9,2],
["2018-11-21",1,5,1],
["2018-11-22",0,3,0],
["2018-11-23",0,7,0],
["2018-11-24",0,4,0],
["2018-11-25",0,6,2],
["2018-11-26",0,8,0],
["2018-11-27",0,1,0],
  ]);

  var options = {
	 chart: {
		title: 'Fold3 Search Feedback Summary',
	 },
	 bars: 'vertical',
	 vAxis: {format: 'decimal'},
	 height: 600,
	 bar: {groupWidth: "95%"},
	 /* backgroundColor: '#222', */
	 colors: ['#00cc88', '#ff5555', '#ffff00'/* '#5588ff' */],
	 /* isStacked: true, */
  };

  var chart = new google.charts.Bar(document.getElementById('chart_div'));

  chart.draw(data, google.charts.Bar.convertOptions(options));
}