Second Y axis in stacked (positive/negative) bar chart in Google Charts - charts

Question

I have build a stacked bar chart to illustrate positive and negative values which looks like this:
Because these values indicate opposites I want to add additional labels to a right Y axis. Is this even possible? My code so far:
var data = google.visualization.arrayToDataTable([
['Type', 'Value1', 'Value2'],
['Left-1', 0, -5],
['Left-2', 0, -3],
['Left-3', 0, 0],
['Left-4', 3, 0],
['Left-5', 5, 0]
]);
var options = {
legend: 'none',
hAxis: {
minValue: -6,
maxValue: 6
}
}
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
jsfiddle: https://jsfiddle.net/cLz5nffm/

Answer 1

there aren't any standard options for an additional axis in this configuration
but you can add custom labels
once the 'ready' event fires
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Type', 'Value1', 'Value2'],
['Left-1', 0, -5],
['Left-2', 0, -3],
['Left-3', 0, 0],
['Left-4', 3, 0],
['Left-5', 5, 0]
]);
var options = {
legend: 'none',
hAxis: {
minValue: -6,
maxValue: 6
}
}
var chartDiv = document.getElementById('chart_div');
var chart = new google.visualization.BarChart(chartDiv);
google.visualization.events.addListener(chart, 'ready', function () {
Array.prototype.forEach.call(chartDiv.getElementsByTagName('text'), function(axisLabel) {
if (axisLabel.getAttribute('text-anchor') === 'end') {
addLabel(
axisLabel,
chart.getChartLayoutInterface().getChartAreaBoundingBox().left +
chart.getChartLayoutInterface().getChartAreaBoundingBox().width - 24 // <-- find good width
);
}
});
function addLabel(label, xOffset) {
var axisLabel = label.cloneNode(true);
axisLabel.setAttribute('x', parseFloat(label.getAttribute('x')) + xOffset);
axisLabel.innerHTML = label.innerHTML.replace('Left-', 'Right ');
chartDiv.getElementsByTagName('svg')[0].appendChild(axisLabel);
}
});
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>