Material Axis Format Example

Gender chart

by daothanhcam

HTML

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

JavaScript

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

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Age', 'Female', 'Male'],
          ['80-89', 80,  -80],
          ['70-79', 100,  -100],
          ['60-69', 220,  -220],
          ['50-59', 270,  -270],
          ['40-49', 700,  -500],
          ['30-39', 2170, -2060],
          ['20-29', 1760, -1820],
          ['10-19', 730, -840],
          ['0-9', 630, -540]
        ]);
                       
        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
          },
          theme: 'material',
          isStacked: true,
          bars: 'horizontal', // Required for Material Bar Charts.
          hAxis: {
            format: "##;##",
            viewWindowMode:'explicit',
            viewWindow:{
              max:3060,
              min:-3060
            }
          },
          annotations: {
          	alwaysOutside: true
          },
          height: 400,
          bar: {
            groupWidth: "100%"
          },
          series: [{
            color: '#f47b40'
          }, {
            color: '#549cd0'
          }]
        };

	      var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }