Google Charts - HTML axis label and title

Question

So I am trying to make html axis labels in google charts. However there does not seem to be any support for creating the axis labels or the title as HTML objects. The title is e

Answer 1

the labels will only accept text...

the chart is drawn with svg, which can be changed manually when the 'ready' event fires

the labels will be <text> elements
to change the font style inline, use svg <tspan> elements within <text>

e.g.

<text>X<tspan baseline-shift="super">m</tspan></text>

---

see following working snippet...

google.charts.load('current', {
  callback: function () {
    var data = [['X','Y']], i, options,
        chart, dataTable;
    for (i = 0; i < 20; i += 1) {
      data.push([i, i * i]);
    }
    dataTable = google.visualization.arrayToDataTable(data);
    options = {
      legend: 'none',
      title: 'Xm versus X2',
      hAxis: {title: 'Xm'},
      vAxis: {title: 'X2'}
    };

    chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

    google.visualization.events.addListener(chart, 'ready', function () {
      $.each($('text'), function (index, label) {
        var labelText = $(label).text();
        if (labelText.indexOf('X') > -1) {
          labelText = labelText.replace(new RegExp(/m/g), '<tspan baseline-shift="super">m</tspan>');
          labelText = labelText.replace(new RegExp(/2/g), '<tspan baseline-shift="super">2</tspan>');
          $(label).html(labelText);
        }
      });
    });

    chart.draw(dataTable, options);
  },
  packages: ['corechart']
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>