How to create a "short currency" axis format in Google Charts?

Question

I've got a Column Chart using Google's Chart API, and everything is great except for the Y-axis (vAxis). The chart itself deals with dollar values which can range from a few thousand to billions, depending on the data view. hAxis has a beautiful 'short' format that lets the Google Chart API do all the heavy lifting of abbreviating things for you (5,000 to 5K, 60,000,000 to 6M, etc.), but we'd like to prefix the values with a dollar sign. I know there is also a built-in 'currency' format and you can provide your own custom format, but I can't find a way to make either of these behave the way 'short' does.

...

// set chart options
var options = {
    chartArea: { top: 70, left: 75, width: 675, height: 300 },
    isStacked: true,
    vAxis: { format: 'short', gridlines: {count: 6}, textStyle: {fontSize: 12} },
    hAxis: { textStyle: {fontSize: 12} },
    legend: { position: 'top', maxLines: 3 }
};

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.ColumnChart($('colchart'));
chart.draw(data, options);
...

This seems like the sort of thing that should be very, very common and is probably built in to the library already. I hope I'm just missing it. Is there any way to do this short of rolling a custom solution by hand?

Answer 1

You can prefix numbers in the data with $ along with 'short'.
Couldn't find a way to format axis using standard options, but as you mentioned, you can roll your own using the 'ready' event.

Adapted from a previous example...

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

function drawChart() {
  // adapted from previous example
  var data1 = google.visualization.arrayToDataTable(
    [['id', 'C1'],[1,0.244543243223],[2,0.343454312334],[3,0.6543223411],[4,0.34231342342314],[5,0.454343343223],[6,0.5434221],[7,0.54324324314],[8,0.45324517],[9,0.543222321],[10,0.54325445519]]
  );
  var data2 = google.visualization.arrayToDataTable(
    [['id', 'C2'],[1,0.43654362],[2,0.46547543],[3,0.65475431],[4,0.65765454434],[5,0.6765443],[6,0.4654436],[7,0.3534657],[8,0.524343434],[9,0.453455532],[10,0.54354354358]]
  );
  var data3 = google.visualization.arrayToDataTable(
    [['id', 'C3'],[1,0.5345524],[2,0.6543453432],[3,0.53453465645614],[4,0.63245524],[5,0.543543536533], [6,0.53454355334],[7,0.242354531],[8,0.3424543523],[9,0.5436536544],[10,0.5425345332]]
  );
  for (var i = 0; i < data1.getNumberOfRows(); i++) {
    data1.setValue(i, 1, data1.getValue(i, 1) * 1000000);
  }
  for (var i = 0; i < data2.getNumberOfRows(); i++) {
    data2.setValue(i, 1, data2.getValue(i, 1) * 1000000);
  }
  for (var i = 0; i < data3.getNumberOfRows(); i++) {
    data3.setValue(i, 1, data3.getValue(i, 1) * 1000000);
  }

  var chartDiv = document.getElementById('chart');

  // format numbers in second column to 5 decimals
  var formatter = new google.visualization.NumberFormat({
    prefix: '$',
    pattern: 'short'
  });
  formatter.format(data1, 1);
  formatter.format(data2, 1);
  formatter.format(data3, 1);

  var options1 = {
    chartArea: { top: 70, left: 75, width: 675, height: 300 },
    height: 400,
    isStacked: true,
    vAxis: { format: 'short', gridlines: {count: 6}, textStyle: {fontSize: 12} },
    hAxis: { textStyle: {fontSize: 12} },
    legend: { position: 'top', maxLines: 3 }
  };

  var joinedData = google.visualization.data.join(data1, data2, 'full', [[0, 0]], [1], [1]);
  var joinedData2 = google.visualization.data.join(joinedData, data3, 'full', [[0, 0]], [1,2], [1]);
  var chart1 = new google.visualization.ColumnChart(chartDiv);

  // use the 'ready' event to modify the chart once it has been drawn
  google.visualization.events.addListener(chart1, 'ready', function () {
    var axisLabels = chartDiv.getElementsByTagName('text');
    for (var i = 0; i < axisLabels.length; i++) {
      if (axisLabels[i].getAttribute('text-anchor') === 'end') {
        axisLabels[i].innerHTML = '$' + axisLabels[i].innerHTML;
      }
    }
  });

  chart1.draw(joinedData2, options1);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>