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

Question

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:

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?

Answer 1

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>