Search code examples
javascriptreactjschartsgoogle-visualization

How do I change format vAxis for specific targetAxisIndex series in React Google Chart


enter image description here

I want to change the type line format series to percentage I try this config:

vAxis: {
  minValue: 0,
  maxValue: 1,
  gridlines: { count: 10 },
  minorGridlines: { count: 0 },
  // Format for targetAxisIndex 1
  1: {format: 'percent'},
}

it doesn't work also I don't see any docs for formating on spesific targetAxisIndex

Current code:

const chartData = [
    [
        "Test Product 003",
        20,
        "This",
        0.5
    ],
    [
        "Test Product 003",
        10,
        "This",
        0.75
    ],
    [
        "Campus Shirt",
        10,
        "This",
        1
    ]
]

  <Chart
    width={900}
    height={720}
    chartType="ComboChart"
    loader={<Spin />}
    data={[
      [
        '#',
        'Sales Quantity',
        { role: 'tooltip', type: 'string', p: { html: true } },
        'Cumulative Sales Quantity',
      ],
      ...chartData,
    ]}
    options={{
      series: {
        0: { type: 'bars' },
        1: {
          type: 'line',
          curveType: 'function',
          targetAxisIndex: 1,
        },
      },
      vAxis: {
        minValue: 0,
        maxValue: 1,
        gridlines: { count: 10 },
        minorGridlines: { count: 0 },
      },
      hAxis: {
        slantedText: true,
      },
      tooltip: { isHtml: true, trigger: 'visible' },
    }}
  />

Here's the sandbox


Solution

  • you can use the vAxes option to format a specific y-axis.

    anything in the vAxis option will be applied to all y-axis.

    for vAxes, use the index number, where 0 is left, and 1 is first right.

    vAxis: {
      minValue: 0,
      maxValue: 1,
      gridlines: { count: 10 },
      minorGridlines: { count: 0 }
    },
    vAxes: {
      1: {
        format: 'percent'
      }
    }