Victory | How to display x-axis from the lowest negative y-axis value

Question

I have a graph to display some values, but the y axis has negative values, as below.

<VictoryChart
  theme={VictoryTheme.material}
>
  <VictoryLine
    style={{
      data: { stroke: "#c43a31" },
      parent: { border: "1px solid #ccc"}
    }}
    data={[
      { x: 1, y: -2 },
      { x: 2, y: -3 },
      { x: 3, y: -5 },
      { x: 4, y: -4 },
      { x: 5, y: -7 }
    ]}
  />
</VictoryChart>

It's displayed like this.

I need to have the x-axis at -7 value of the y-axis. How can I achieve this? Thanks!

Answer 1

Try this:

<VictoryChart 
  theme={VictoryTheme.material}
  domain={{x: [1, 5], y: [-7, -2]}}
>
<VictoryAxis 
  orientation="top"
/>

<VictoryAxis dependentAxis
  orientation="left"
  invertAxis
/>

<VictoryLine
  style={{
    data: { stroke: "#c43a31" },
    parent: { border: "1px solid #ccc"}
   }}
  data={[
    { x: 1, y: -2 },
    { x: 2, y: -3 },
    { x: 3, y: -5 },
    { x: 4, y: -4 },
    { x: 5, y: -7 }
  ]}
/>
</VictoryChart>