Column chart with per-column color

Radzen.Blazor Components
1

I have a usecase to have a column chart where I want the column to be colored positive if the amount is >= 0 or red is it is < 0.

Currently from what I can see, the RadzenColumnSeries takes only a string value for the Fill. In the example you highlight the color change but for separate column series.

In this base usecase, there is only one series and separating it into 2 series, so that the positives are green and negatives are red, makes for an awkward layout of the chart that makes one think it’s a bug.

I could use a LineChart, however the data that needs representing is best represented as solid columns for amounts and a line chart gives the wrong impressioin.

image
image1086×353 7.26 KB

Is there a plan to allow the RadzenBarChart to take in a string lambda so that the color could be provided per column ?

2

Hi @iustin94,

We currently don't plan to add such a lambda however we do accept pull requests. By the way you can check my reply in this thread - perhaps it could help implement what you are after: Customize Bar Chart - #2 by korchev

1 Like
3

Hi @iustin94

Have you checked the example on the Radzen Components Site?

The third chart down uses SeriesColorRange to set the colors based on range values.

    List<SeriesColorRange> fillRange = new List<SeriesColorRange>()
    {
        new SeriesColorRange() {Min = 0, Max = 275000, Color = "red"},
        new SeriesColorRange() {Min = 275000, Max = 324000, Color = "orange"},
        new SeriesColorRange() {Min = 324000, Max = 10000000, Color = "#06cd06"},
    };

Regards

Paul

1 Like
4

I completely forgot about that :slight_smile: We should probably restructure the demo so it better demonstrates the feature.

1 Like
5

This is awesome, I missed this, thank you for pointing it out