Skip to content

Stacked bar chart with 0 values won't render <Bar /> #6235

Description

@matt-miro

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

Image

Storybook implementation

Image

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

Image

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

Metadata

Metadata

Labels

bugGeneral bug labelenhancementEnhancement to a current API

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions