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

user_7716289 0
Viewed 58

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

reactjs google-visualization charts javascript
1 Answers

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'
  }
}
user_50907710
Related