Google Charts dual x-axis different ticks

Question

I'm trying to generate a Google chart Bars with dual x-axis and different tick but no luck, here is my code:

 google.load('visualization', '1.1', {packages: ['corechart', 'bar']}); google.setOnLoadCallback(drawRightY); function drawRightY() { var data = google.visualization.arrayToDataTable([ ['City', '2010', '2000'], ['NY', 81, 80], ['CA', 37, 36], ['IL', 26, 28], ['TX', 20, 19], ['PA', 15, 15] ]); var options = { chartArea: { width: '100%' }, hAxes: { 0: { viewWindow: { max: 100, min: 0 }, ticks: [{ f: 'A1', v: '3.3' }, { f: 'A2', v: '10' }, { f: 'A3', v: '16.7' }, { f: 'A4', v: '23.3' }, { f: 'A5', v: '30' }, { f: 'A6', v: '36.7' }, { f: 'A7', v: '43.4' }, { f: 'A8', v: '50' }, { f: 'A9', v: '56.7' }, { f: 'A10', v: '63.4' }, { f: 'A11', v: '70' }, { f: 'A12', v: '76.7' }, { f: 'A13', v: '83.4' }, { f: 'A14', v: '90' }, { f: 'A15', v: '96.7' }] }, 1: { side: 'top', viewWindow: { max: 100, min: 0 }, ticks: [10, 30, 50, 70, 90] } }, series: { 0: { targetAxisIndex: 0 }, 1: { targetAxisIndex: 1 } }, bars: 'horizontal', // Required for Material Bar Charts. colors: ['#FFB74D', '#FFE0B2'], bar: { groupWidth: "80%" }, legend: { position: 'none' } }; var chart = new google.visualization.BarChart(document.getElementById('barchart')); chart.draw(data, options); } 

 <script type="text/javascript" src="https://www.google.com/jsapi"></script> <div id="barchart"></div> 

The thing is that i need the second series axis to be on top of the chart and the first one in the bottom, its supposed to work with the "side" tag but not working.

Answer 1

You didn't create a Material Bar Chart, the class must be google.charts.Bar instead of google.visualization.BarChart .

However, the problem, regardless of the chosen Chart-Type: you can't have both(custom ticks and dual x-axes):

Material BarCharts AFAIK didn't support ticks, and Non-Material BarCharts didn't support dual x-axes.