How to show two title in x-axis in Google Charts?

Question

I am using Google Charts for a simple scatter Chart. I have draw two title in hAxis, i would like to set the hAxis title left and right.

Like

Like

current

current

i want to show to title in a-axis

 function drawChart() { // Define the chart to be drawn. var data = new google.visualization.DataTable(); data.addColumn('number', ''); data.addColumn('number', ''); data.addRows([ [-0.5, 1], [100, 1], [-80, 2], [25, 2], [60, 8], ]); // Set chart options var options = { title: 'guilt experience Vs eat satisfaction', titlePosition: 'none', position: 'center', hAxis: { title: '', minValue: 0, maxValue: 15, ticks: [0, 20, 40, 60, 80, 100, -20, -40, -60, -80, -100] }, vAxis: { title: '', minValue: 0, ticks: [0, 1, 2, 3, 4, 5, 6, 7, 8] }, legend: { position: 'none' }, }; // Instantiate and draw the chart. var container = document.getElementById('chart_div'); var chart = new google.visualization.ScatterChart(document.getElementById('chart_div')); google.visualization.events.addListener(chart, 'ready', function() { var layout = chart.getChartLayoutInterface(); for (var i = -0; i < data.getNumberOfRows(); i++) { // add image above every fifth element var xPos = layout.getXLocation(data.getValue(i, 0)); var yPos = layout.getYLocation(data.getValue(i, 1)); var whiteHat = container.appendChild(document.createElement('img')); if (data.getValue(i, 0) < 0) { whiteHat.src = 'https://i.imgur.com/LqiTeQI.png'; } else { whiteHat.src = 'https://i.imgur.com/rACTObW.png'; } whiteHat.style.position = 'absolute'; whiteHat.style.height = '15px'; whiteHat.style.width = '15px'; // 16x16 (image size in this example) whiteHat.style.top = (yPos) + 'px'; whiteHat.style.left = (xPos) + 'px'; } }); chart.draw(data, options); } google.charts.setOnLoadCallback(drawChart);

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"> </script> <script type="text/javascript"> google.charts.load('current', { packages: ['corechart', 'scatter'] }); </script> <div id="chart_div" ></div>

I am using Google Charts for a simple scatter Chart. I have draw two title in hAxis, i would like to set the hAxis title left and right.

Answer 1

nothing out of the box will let you add two x-axis titles.

here are a couple options...

1) use the same method you're using to place the images, to place a couple of <span> elements with the titles you need.

2) use the Unicode non-breaking space character ( \  ) to create one long title.

eg

Guilt Value\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0Eat Value

see following working snippet...

 function drawChart() { // Define the chart to be drawn. var data = new google.visualization.DataTable(); data.addColumn('number', ''); data.addColumn('number', ''); data.addRows([ [-0.5, 1], [100, 1], [-80, 2], [25, 2], [60, 8], ]); // Set chart options var options = { title: 'guilt experience Vs eat satisfaction', titlePosition: 'none', position: 'center', hAxis: { title: 'Guilt Value\ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ Eat Value', minValue: 0, maxValue: 15, ticks: [0, 20, 40, 60, 80, 100, -20, -40, -60, -80, -100] }, vAxis: { title: '', minValue: 0, ticks: [0, 1, 2, 3, 4, 5, 6, 7, 8] }, legend: { position: 'none' }, }; // Instantiate and draw the chart. var container = document.getElementById('chart_div'); var chart = new google.visualization.ScatterChart(document.getElementById('chart_div')); google.visualization.events.addListener(chart, 'ready', function() { var layout = chart.getChartLayoutInterface(); for (var i = -0; i < data.getNumberOfRows(); i++) { // add image above every fifth element var xPos = layout.getXLocation(data.getValue(i, 0)); var yPos = layout.getYLocation(data.getValue(i, 1)); var whiteHat = container.appendChild(document.createElement('img')); if (data.getValue(i, 0) < 0) { whiteHat.src = 'https://i.imgur.com/LqiTeQI.png'; } else { whiteHat.src = 'https://i.imgur.com/rACTObW.png'; } whiteHat.style.position = 'absolute'; whiteHat.style.height = '15px'; whiteHat.style.width = '15px'; // 16x16 (image size in this example) whiteHat.style.top = (yPos) + 'px'; whiteHat.style.left = (xPos) + 'px'; } }); chart.draw(data, options); } google.charts.setOnLoadCallback(drawChart);

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"> </script> <script type="text/javascript"> google.charts.load('current', { packages: ['corechart', 'scatter'] }); </script> <div id="chart_div" ></div>