Background color for not filled bar

[carlosriveroib]

It is possible to change the background color for the part of the bar that is not filled? Something like this? Thank you very much

[Abhinandan-Kushwaha]

This is not currently supported, but I can suggest you a hacky solution for now.

Use a Stacked bar chart instead of a normal Bar chart (replace data with stackData).
Each stack will have 2 sections-

1. One with the value of your actual data
2. Second having value = maxValue-value

This will render a stacked bar chart where each stack reaches the full height with the base section representing the actual value.
Then you can adjust the colors and border radii of the stack sections to match with your design.

Give it a try and ping here if it doesn't work.

[carlosriveroib]

Hi, thanks for the answer. We cannot use a stacked bar chart. But it's ok, that design it is not strictly necessary. I will be reading the changelog. If you finally add this functionality, just write here if you remember. Thank you very much

[Abhinandan-Kushwaha]

Hi @carlosriveroib
This can be achieved using the showVerticalLines prop and setting the verticalLinesThickness equal to the bars' thickness.
The default bar thickness is 30, so you can set verticalLinesThickness={30}.

Next, you can make the verticalLines rounded using verticalLinesStrokeLinecap='round'
The verticalLinesStrokeLinecap is available prop from version 1.4.22 onwards.

[carlosriveroib]

Nice, thank you. Round lines strokes doesn't fit well if overflowTop is used. I use this because I have a custom tooltip and it is being cut by the top line, then I use overflowTop to fix that.

Without overflowTop prop

With overflowTop prop

Thank you

[Abhinandan-Kushwaha]

@carlosriveroib Try setting the height of the vertical lines using the verticalLinesHeight prop.

[carlosriveroib]

works perfectly, thank you