Victory chart give range of 10 in y axis

Question

I creating bar chart. I want to give range to y axis for e.g currently y axis showing 5, 10,15,20 but I want 10,20,30 a range of 10. How can I achieve that?

   <VictoryAxis
        domain={{y: [0, 30]}}
        dependentAxis
        orientation="left"
        style={{
          tickLabels: {fontSize: 12},
          axis: {stroke: 'transparent'},
        }}
      />

Answer 1

In order to change the default axis of your chart you need to provide one or more <VictoryAxis /> components as children.

To change the interval of the ticks just set the tickCount prop on each axis where tickCount equals the division of your full domain range by the desired interval range e.g.

30 / 10 = 3 for the y-axis

and

20 / 10 = 2 for the x-axis because the domain range here is actual 20, not 40.

<VictoryChart
  domain={{ x: [ 20, 40 ], y: [ 0, 30 ]}}
>
  <VictoryAxis
    tickCount={ 3 }
    dependentAxis={ true } /* To target the y-axis */
  />
  <VictoryAxis
    tickCount={ 2 }
  />
  <VictoryScatter
    data={ [
      { x: 25, y: 10, label: 'Foo' },
      { x: 32, y: 28, label: 'Bar' }
    ] }
    size={ 3 }
  />
</VictoryChart>