How to stop victory axis behave differently when there are 0 values?

Question

If you go to the first example demonstration here , with code:

<VictoryChart
  theme={VictoryTheme.material}
  domainPadding={10}
>
  <VictoryBar
    style={{ data: { fill: "#c43a31" } }}
    data={sampleData}
  />
</VictoryChart>

you see that the bars are looking good, aligned nicely:

But once you change the code like this (adding a data point with a 0 x value):

<VictoryChart
  theme={VictoryTheme.material}
  domainPadding={10}
>
  <VictoryBar
    style={{ data: { fill: "#c43a31" } }}
    data={[{x: 0, y: 2}, ...sampleData]}
  />
</VictoryChart>

You see that the new bar is going weird. I sort of get it why it's like this. If negative values would be present, then they would be shown to the left from the y axis. But I find it very frustrating that I couldn't find a way to turn this off, and handle 0, or even negative values like positive ones, and just show the axis on the left always.

I'm using custom VictoryAxis , and tried different domainPadding s, played with singleQuadrantDomainPadding , but nothing worked.

Answer 1

I use set offsetX and set tickValues to deal with the x=0 problem.

Here's the code:

<VictoryChart
  theme={VictoryTheme.material}
  domainPadding={10}
>
  <VictoryBar
    style={{ data: { fill: "#c43a31", padding: 15 } }}
    data={[{x:0, y:2}, ...sampleData]}
  />
  <VictoryAxis tickValues={[-0.25, 0,1,2,3,4,5]} tickFormat={t => t>=0 ? t: ''} />
  <VictoryAxis offsetX={60}  crossAxis dependentAxis/>
</VictoryChart>

And the effect: