Victory Chart line is cropped when at 0 level on dependentAxis

Question

I have a styling issue with Victory Charts, whether it's a VictoryLine or VictoryArea component I'm using, the line is cropped when it reaches the bottom of the chart, as you can see on the screenshot. The stroke width of the line is set to 2, when it's flat to 0 on the dependant axis, it appears as it's 1 pixel stroke width.

Victory Chart Area screenshot

I have tried every padding option I can use (I think) on the <VictoryChart> or the <VictoryArea> component, I was thinking about elevating the whole VictoryArea component about 1px to fix the issue but it seems I can't do this.

What am I missing here?

Here is the code with the padding attempts on the VictoryArea component :

                <VictoryAxis
                  dependentAxis
                  tickCount={2}
                  tickLabelComponent={<VictoryLabel dx={0} />}
                  crossAxis={false}
                  style={{
                    grid: {
                      stroke: '#F2F4F7',
                    },
                    axis: { stroke: 'none' },
                    tickLabels: {
                      fontSize: 11,
                      fill: '#98A2B3',
                    },
                  }}
                />
                <VictoryAxis
                  fixLabelOverlap
                  style={{
                    axis: {
                      stroke: 'none',
                      padding: 10,
                    },
                    tickLabels: {
                      fontSize: 11,
                      margin: '20px 0 0 0',
                      fill: '#98A2B3',
                    },
                  }}
                />
                <VictoryArea
                  style={{
                    data: {
                      fill: `transparent`,
                      stroke: color || '#1A1EFF',
                      strokeWidth: 2,
                      padding: '0 0 1px 0',
                    },
                    labels: {
                      display: 'none',
                    },
                  }}
                  padding={{ bottom: 1 }}
                  data={groupedData}
                  x="date"
                  y="total"
                />
              </VictoryChart>

Answer 1

It looks like the problem is that the minimum y domain that the chart is using is 0. Therefore your line on the x-axis is having half it's stroke width cut off.

You can take over control of the y domain with something like this:

<VictoryChart minDomain={{ y: -1000 }}>
...
</VictoryChart>

You'll need to make this value responsive to the data. You can get the maximum y-value with something like this:

const maxY = Math.max(groupedData.map(d => d.total))

Then you can use this to determine an appropriate min y domain, for example:

<VictoryChart minDomain={{ y: -0.1*maxY }}>
...
</VictoryChart>

Hope this helps.