What is the current behavior?
A stacked bar chart with 0 values for each data point won't render its component and consecutively no YAxis either.
Implementation in our frontend
Storybook implementation
Data set used in above screenshot:
[
{
name: 'Category 1',
a: 0,
b: 0,
c: 0,
},
{
name: 'Category 2',
a: 0,
b: 0,
c: 0,
},
{
name: 'Category 3',
a: 0,
b: 0,
c: 0,
},
{
name: 'Category 4',
a: 0,
b: 0,
c: 0,
},
{
name: 'Category 5',
a: 0,
b: 0,
c: 0,
},
]
Bars were rendered based of this array:
[
{
dataKey: 'a',
name: 'First bar',
fill: '$ocean-400',
stackId: 'stack',
},
{
dataKey: 'b',
name: 'Second bar',
fill: '#FF82A0',
stackId: 'stack',
},
{
dataKey: 'c',
name: 'Third bar',
fill: '#F5DB83',
stackId: 'stack',
},
]
What is the expected behavior?
For a <Bar /> to render its <path /> element even if its value is 0.
Besides the YAxis not rendering, our implementation has another issue; some data points that are 0 are considered "invalid". For our specific usecase it means the service that collected these metrics, was turned of, and we visualise that to our users with a particular placeholder component. we use a custom shape to render it, and rely on the <Bar /> being rendered
Please provide a demo of the problem in a sandbox
0 data
https://stackblitz.com/edit/react-zvmwbiob?file=src%2FExample.tsx&showSidebar=0
Some data
https://stackblitz.com/edit/react-zvmwbiob-8psuwb9s?file=src%2FExample.tsx&showSidebar=0
Which versions of Recharts, and which browser / OS are affected by this issue? Did this work in previous versions of Recharts?
Recharts v3.1.2, issue doesn't seem to happen in v2.x
What is the current behavior?
A stacked bar chart with 0 values for each data point won't render its component and consecutively no
YAxiseither.Data set used in above screenshot:
Bars were rendered based of this array:
What is the expected behavior?
For a
<Bar />to render its<path />element even if its value is 0.Besides the YAxis not rendering, our implementation has another issue; some data points that are
0are considered "invalid". For our specific usecase it means the service that collected these metrics, was turned of, and we visualise that to our users with a particular placeholder component. we use a customshapeto render it, and rely on the<Bar />being renderedPlease provide a demo of the problem in a sandbox
https://stackblitz.com/edit/react-zvmwbiob?file=src%2FExample.tsx&showSidebar=0
https://stackblitz.com/edit/react-zvmwbiob-8psuwb9s?file=src%2FExample.tsx&showSidebar=0
Which versions of Recharts, and which browser / OS are affected by this issue? Did this work in previous versions of Recharts?
Recharts v3.1.2, issue doesn't seem to happen in v2.x