Victory Native: chart not showing Y axis's first label

Viewed 1526

Y-axis not showing 0 value

 <VictoryChart
                padding={{left: 75, top: 50, right: 50, bottom: 50}}
                width={Dimensions.get('window').width}
                theme={VictoryTheme.material}>
                <VictoryBar
                  style={{
                    data: {fill: colors.barColor, border: 0},
                    axis: {stroke: 'transparent'},
                    ticks: {stroke: 'transparent'},
                    tickLabels: {fill: 'transparent'},
                  }}
                  data={profitFlowResponse.data.values}
                  x="displayName"
                  y="income"
                />
                <VictoryAxis
                  dependentAxis
                  tickValues={Math.max(
                    profitFlowResponse.data.values.map((item) => item.income),
                  )}
                  domain={{
                    y: [
                      0,
                      Math.ceil(
                        Math.max(
                          ...profitFlowResponse.data.values.map(
                            (item) => item.income,
                          ),
                        ),
                      ),
                    ],
                  }}
                  tickFormat={(t) => `${currency.symbol}${nFormatter(t, 2)}`}
                  style={{
                    grid: {stroke: colors.invoiceDivider, strokeWidth: 0.5},
                    axis: {stroke: 'none'},
                  }}
                />
                <VictoryAxis
                  fixLabelOverlap={true}
                  style={{
                    tickLabels: {
                      angle: -45,
                      padding: moderateScale(16),
                    },
                    grid: {strokeWidth: 0},
                    axis: {stroke: 'none'},
                  }}
                  tickValues={profitFlowResponse.data.values.map(
                    (item) => item.displayName,
                  )}
                />
              </VictoryChart>

enter image description here

1 Answers

After check again on document, I found this:

Note: Axes that typically cross at zero will not display ticks or tick labels at zero. To change this behavior, set the crossAxis prop to false.

So you can update your code like:

...
<VictoryAxis dependentAxis crossAxis={false}/>
...

Result:

enter image description here

Related