Customize Bar Chart

Radzen.Blazor Components
1

I have a question about styling/customizing the bar chart component: In the example on your Web page for the Bar chart component ( Blazor Bar Chart Component | Free UI Components by Radzen) you show revenue data for quarters of two years (grouped).

Is there any way to change the color/style of one specific data point? E.g. I want to "highlight" the bar of Q3/2024. All other bars should stay as they are.

Any idea how this can be done?

Thanks a lot!

2

Hi @JustJoe,

You can't set the background of only one bar. You. can however specify a custom set of colors for the fill (background) of every bar:

<RadzenBarSeries Fills="@(new [] {"red", "green"})" ... />

RadzenChart will cycle the colors specified in the Fills property when rendering the bars. I think you can use this as a workaround and specify unique "fill" for the desired series.

Column chart with per-column color
3

Thanks for the idea! This works quite well. I assigned an array with 12 empty strings to the Fills= property and upon initialization, I run them through a loop and if the current month is matched, I assign a custom color value instead of an empty string. This way, the entire bars keep their original colors defined by the theme except for the bar with the value for the current month which then gets "highlighted" that way.

Thanks a lot!