Google Charts - HTML axis label and title - charts

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 easy enough to fix, just add it in as a separate HTML object to the page, but the axis labels are more challenging. Has anyone been able to do this? As an example the below jsfiddle should show what happens when you attempt to use simple sub and sup html tags.
https://jsfiddle.net/jqmya8j9/1/
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(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: 'X<sub>m</sub> versus X<sup>2</sup>',
//best guess, does nothing
titleTextStyle: {isHtml: true},
hAxis: {title: 'X<sub>m</sub>'},
vAxis: {title: 'X<sup>2</sup>'}
};
chart = new
google.visualization.ScatterChart(document.body);
chart.draw(dataTable, options);
});
Based on the below answer (Thanks!), and what I am actually doing, I wrote the following general rule for this using _{} and ^{} instead of < sub > and < sup >
https://jsfiddle.net/jqmya8j9/2/
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(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: 'X_{m} versus X^2',
hAxis: {title: 'X_m'},
vAxis: {title: 'X^{2}'}
};
chart = new
google.visualization.ScatterChart(document.body);
google.visualization.events.addListener(chart, 'ready', function () {
$.each($('text'), function (index, label) {
var labelText = $(label).text();
if (labelText.match(/_|\^/)) {
labelText = labelText.replace(/_([^\{])|_\{([^\}]*)\}/g, '<tspan style="font-size: smaller;" baseline-shift="sub">$1$2</tspan>')
labelText = labelText.replace(/\^([^\{])|\^\{([^\}]*)\}/g, '<tspan style="font-size: smaller;" baseline-shift="super">$1$2</tspan>')
$(label).html(labelText);
}
});
});
chart.draw(dataTable, options);
});

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>