Double Y Axis Ticks For Google Charts

I am trying to set ticks for a double y-axis line graph but either the graph wont load, it it loads exactly the same. Any help will be greatly appreciated Goal is to set Price tick

Solution 1:

there are several configuration options that aren't supported by Material charts, including...

{hAxis,vAxis,hAxes.*,vAxes.*}.ticks

see --> Tracking Issue for Material Chart Feature Parity

instead, recommend using a Classic chart with the following option...

theme: 'material'

---

for dual y-axis charts, use the series option to specify the target axis

  series: {
    1: {
      targetAxisIndex: 1,
    }
  },

use option vAxes, with an e, to specify ticks for each y-axis

  vAxes: {
    0: {
      ticks:[0, 1000, 2000, 3000],
      title: 'Last Price'
    },
    1: {
      ticks:[0, 0.002, 0.004, 0.006],
      title: 'Base Volume'
    }
  }

---

see following working snippet...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable({
      cols: [
        {label: 'x', type: 'string'},
        {label: 'y0', type: 'number'},
        {label: 'y1', type: 'number'}
      ],
      rows: [
        {c:[{v: 'row 0'}, {v: 1800}, {v: 0.00242}]},
        {c:[{v: 'row 1'}, {v: 2200}, {v: 0.00521}]},
        {c:[{v: 'row 2'}, {v: 2800}, {v: 0.00343}]},
        {c:[{v: 'row 3'}, {v: 2800}, {v: 0.00441}]},
        {c:[{v: 'row 4'}, {v: 2300}, {v: 0.00532}]}
      ]
    });

    var container = document.getElementById('chart');
    var chart = new google.visualization.LineChart(container);
    chart.draw(data, {
      width: 600,
      height: 300,
      series: {
        1: {
          targetAxisIndex: 1,
        }
      },
      theme: 'material',
      vAxes: {
        0: {
          ticks:[0, 1000, 2000, 3000],
          title: 'Last Price'
        },
        1: {
          ticks:[0, 0.002, 0.004, 0.006],
          title: 'Base Volume'
        }
      }
    });
  },
  packages: ['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>