Conditionally skip a bar

I want to conditionally skip rendering a bar in a bar chart. If the data exists, I want to render the bar, but if the data doesn’t exist, I don’t want there to be an empty space in the bar chart.

This is what my chart looks like

<ComposedChart data={data}>
    <Bar dataKey="a"/>
    <Bar dataKey="b"/>
    <Bar dataKey="c"/>
    <Bar dataKey="d"/>
</ComposedChart>

For example, if dataKey “c” is 0 or doesn’t exist, I want to render a, b and d without the empty space that c should occupy.

[merio901]

I tried approach with custom shape for each Bar and manually generating path for each Bar depending on the payload it gets. Came up with the ConditionalRectangleBar that will have 0 width when no specific key is present and normal RectangeBar which will adjust it’s position on AxisX whenever first conditional Bar is not here.

Here is sandbox, try playing with y key in data array. https://codesandbox.io/s/recharts-conditional-double-bar-chart-7kgze

@bpatterson-r7 @dgarciasarai check this out if this is the outcome you need 😄

[hossammourad]

You can use the hide attribute on the Bar component. Unfortunately it’s not mentioned in the documentation, I got it from exploring the source code.