How can I achieve to draw bar with different color in c1:FlexChart?

Posted by: ronen.hong on 3 August 2022, 5:28 pm EST

    • Post Options:
    • Link

    Posted 3 August 2022, 5:28 pm EST - Updated 3 October 2022, 11:26 pm EST

    like below attached picture, how can I achieve to draw bar with different color in c1:FlexChart in code? Can I set the specific color of the bar like CellFactory in c1:FlexGrid?

  • Posted 3 August 2022, 6:37 pm EST


    Thanks for reaching out to us with your query.

    You can change the Bar colors by setting Palette property of C1FlexChart. There are some defined color in these palette. Please refer here for the same : Setting FlexChart Palette | FlexChart | ComponentOne

    Just in case, if you want to change colors on your own. Then, you need to set Palette property to Custom and then pass the collection of brushes to the FlexChart’s CustomPalette property .(see code snippet)

         var customBrushes = new Brush[3] { Brushes.SkyBlue, Brushes.Tomato, Brushes.DarkGray };
         flexChart.Palette = C1.Chart.Palette.Custom;
         flexChart.CustomPalette = customBrushes;

    Please refer the attached sample for the same :

    Best Regards, Nitin

  • Posted 3 August 2022, 7:57 pm EST

    Thanks for reply but I want to change color in the same series according to some condition.

    Let me explain more clearly. Let’s say, I draw traiding volume chart and comparing to the traiding volume of the previous day, if it is more than, I want to color with red, if it is less than, I want to draw it with blue.

    so, in your example, Manufactured has diffrent colors. e.g. in 1, it is skyblue, in 2, it is green and so on

    sorry for my ambiguous question :frowning:

  • Posted 3 August 2022, 8:04 pm EST


    Apologize for misunderstanding your scenario.

    As we observed, that you want to change color of bar according to a condition i.e., conditional formatting.

    JFYI, You can handle SymbolRendering event for a particular series to achieve conditional formatting on series symbol. SymbolRendering event fires for every symbol when it’s rendering on FleChart.

    As your requirement, We’ve modified the sample to change the color of Column bar according to previous value.

    1. If previous value is greater than current, then fill Red color.
    2. If previous value is smaller than current, then fill Blue color.
    3. Otherwise(if previous value is same as current), then fill Gray color.
           private void Symbol_Rendering(object sender, C1.WPF.Chart.RenderSymbolEventArgs e)
                var data = (e.Item as Product).Sales;
                if (prevValue < data)
                else if (prevValue > data)
                prevValue = data;

    Please refer the attached modified sample for the same:

    Best Regards, Nitin

  • Posted 4 August 2022, 10:47 am EST

    Thank you so much!

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels