CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
Gustav
Gustav

Reputation: 3586

How do I format axes on line chart google chart material?

I'm having problems formatting the axes of material charts.

Using "classic" line chart if I would like to format my vertical axis with a dollar sign, I would do {vAxes: { 0: {title: 'Amount',format: '$#,##'}}} Making it look like so: enter image description here

I would've thought I could change to {axes: {y: {Amount: {format:'$#,##', label:'Amount'} } } } after reading what little docs exist for the material charts, but this didn't work at all.

Also, I have date on the horizontal axis, and the default formatting is sh*t! I can't figure out how to override that formatting either. Note this is on the axis it self I'm trying to format.

With the horizontal I tried setting hAxis: {format:'YYYY-MM-DD'} but that didn't work.

My main question would be: Does anyone know of a complete documentation of the material charts? The one I've been using is this.

Second question: How do I format the values on the axes?

Upvotes: 1

Views: 4066

Answers (1)

WhiteHat
WhiteHat

Reputation: 61275

the options simply are not available on Material charts...

see --> Tracking Issue for Material Chart Feature Parity #2143

when using a Core chart instead, there is an option that will get the chart "close" to Material chart... 

theme: 'material'

see following working snippet... 

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

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('date','Date');
  data.addColumn('number','Value');
  data.addRows([
    [new Date(2017, 1, 12), 250],
    [new Date(2017, 1, 13), 200],
    [new Date(2017, 1, 14), 150]
  ]);

  var options = {
    hAxis: {
      format: 'yyyy-MM-dd'
    },
    theme: 'material',
    vAxis: {
      format: '$#,##',
      title: 'Amount'
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 3

Related Questions