Material Axis Format Example

An example of a Google Material Chart with Axis Formats.

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['bar']}]}"></script>
       <div id="chart_div"></div>
    <br/>
    <div id="btn-group">
      <button class="button button-blue" id="none">No Format</button>
      <button class="button button-blue" id="scientific">Scientific Notation</button>
      <button class="button button-blue" id="decimal">Decimal</button>
      <button class="button button-blue" id="short">Short</button>
    </div>

CSS

#chart_div {
    margin-top: 100px;
}

JavaScript

google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Dag', 'Differens'],
          ['8/12', 10.5],
          ['9/12', 0],
          ['10/12', 0],
          ['11/12', 0],
          ['12/12', -6.60],
          ['13/12', 10.30]
        ]);

        var options = {
          chart: {
            
          },
            tooltip: {
                isHtml: true,
                ignoreBounds: true
            },
            series: {
                0: {
                    visibleInLegend: false
                }
            },
            bars: 'vertical', // Required for Material Bar Charts.     
        
            
          hAxis: {format: 'decimal'},
          height: 100,
          colors: ['#1b9e77', '#d95f02', '#7570b3']
        };

        var chart = new google.charts.Bar(document.getElementById('chart_div'));
console.log(google.charts.Bar.convertOptions(options));
        chart.draw(data, google.charts.Bar.convertOptions(options));
      };