recharts AreaChart add blank spaces within negative-positive joins

Question

i am using recharts plugin, all is good but i found a bug when is rendering AreaCharts.

In this case i want to render positive and negative values, i use stackOffset=sign to accumulate the negative and positive values on each side of the Y axis. But if the area with negative values, have some positive value, then at joining is adding white spaces.

Am i doing something wrong?

`<AreaChart data={args.chartData}
        stackOffset="sign"
        margin={{ top: 20, right: 10, left: -30, bottom: 0 }}>
        <XAxis dataKey="month" />
        <YAxis 
          width={80}
          tick={args.customizedTick}
          // ticks={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]}
          interval={0}
          domain={[1, 15]}
          tickFormatter={args.tickFormatter}
        />
        <CartesianGrid strokeDasharray="5 5" vertical="true" fill="#fafafa" horizontal={false}/>
        <Tooltip content={args.renderTooltip} />
        <Area stackId="1" type="monotone" dataKey="value" stroke={"red"} fillOpacity={0.1} fill={"red"} />
        <Area stackId="1" type="monotone" dataKey="value2" stroke={"green"} fillOpacity={0.1} fill={"green"} />
        <Area stackId="1" type="monotone" dataKey="score" stroke={"blue"} fillOpacity={0.1} fill={"blue"} />
        
      </AreaChart>`

I have a scenario where you can reproduce and play with the plugin to see the weird behaviour

https://codesandbox.io/s/rechart-area-chart-forked-6xktp0?file=/index.js

recharts AreaChart add blank spaces within negative-positive joins

0 Answers0