Recharts: Hide Bar where value is undefined

Question

I have a Recharts BarChart component with 3 different values for each day of the week: primary, secondary, and tertiary. In some cases secondary and tertiary have no data. If there is no data, I'd like for the specific Bar components mapped to those keys to not render at all on those specific days, however I'm struggling to find any way of doing this.

I'm using the BarChart like so:

<BarChart
  width={700}
  height={500}
  data={data}
>
  <XAxis dataKey="name" />
  <YAxis />
  <Bar dataKey="primary" fill="#009734" />
  <Bar dataKey="secondary" fill="#D97800" />
  <Bar dataKey="tertiary" fill="#C1BEBE" />
</BarChart>

This is what my data currently looks like:

[{
  name: 'Tue',
  primary: 8,
}, {
  name: 'Wed',
  primary: 7,
  secondary: 5,
}, {
  name: 'Thu',
  primary: 12,
  secondary: 9,
  tertiary: 7,
}]

When rendered, I see this:

BarChart Example 1

However I'd much rather not have those value-less bars added to the chart at all so that the other data is moved over to be more centrally-aligned and the daily plots get moved closer together:

Modified BarChart

That is a crude image edit, but I think it illustrates what I'm trying to do.

Is there some way I can achieve this with Recharts?

How did you resolve it? I also have a similar requirement. – Sanjay Joshi Mar 27 '23 at 10:41 — Sanjay Joshi, Mar 27 '23 at 10:41

score 0 · Answer 1 · answered Mar 06 '20 at 09:49

Recharts doesn't support this option right now.

There is an open issue from 2 years ago that was most likely misunderstood by the people who answered (the op wants to hide bars like you - conditional on the missing data not the entire Bar like the "hide" property or reducing the data would allow).

Recharts: Hide Bar where value is undefined

1 Answers1