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

user_9307392 0
Viewed 320

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:

enter image description here

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 domainPaddings, played with singleQuadrantDomainPadding, but nothing worked.

enter image description here

victory-charts react-native reactjs javascript
1 Answers

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:

enter image description here

user_83857580
Related