Specific Color for each Bar

[Tariq]

Hi, I want to implement a bar chart, but for each interval of values I want a specific color. for example if the value is less than %50 the color is red, if the value is larger the color of the bar is green.

Can you give me a sample code on how to do this?

Thanks,

[Joseph]

Hello,

This is something I am also interested in doing. While I could work with a relative value such as percentages as Tareq indicated, it would also be nice to be able to use an absolute measurement. For example, to say any bar less than a "Y" value of 30 would be green, any bar with a "Y" value of 30 - 60 would be yellow, any bar with a "Y" value greater than 60 would be red, etc.

Either way, having some way to assign colors to individual bars based on a relative or absolute measurement would be wonderful. So much meaning can be conveyed with color.

Thanks,
Joseph

[Georgi]

Hi guys,

Thanks for contacting us and for your question.

This can be easily achieved by using the PointTemplateSelector property, exposed by the base PointTemplate chart series:

PointTemplateSeries

Please find attached a sample project that demonstrates how to achieve the scenario.

I hope this helps. Let me know if I can assist you in some other way.

Kind regards,
Georgi
the Telerik team

[Tariq]

Perfect! Thank you

[Gary]

Is it possible to bind the color of each bar to a property? For example like this:

<telerik:BarSeries ItemsSource="{Binding ChartCollection}">
                       <telerik:BarSeries.ValueBinding>
                           <telerik:PropertyNameDataPointBinding PropertyName="Value"></telerik:PropertyNameDataPointBinding>
                       </telerik:BarSeries.ValueBinding>
                       <telerik:BarSeries.CategoryBinding>
                           <telerik:PropertyNameDataPointBinding PropertyName="Category"></telerik:PropertyNameDataPointBinding>
                       </telerik:BarSeries.CategoryBinding>
                       <telerik:BarSeries.DefaultVisualStyle>
                           <Style TargetType="Border">
                               <Setter Property="Background" Value="{Binding Color}"/>
                           </Style>
                       </telerik:BarSeries.DefaultVisualStyle>
                   </telerik:BarSeries>

where ChartCollection is a collection of ChartData objects that each have a Value, Category, and Color property

[Georgi]

Hi Gary,

Thanks for getting back to us.

This scenario is not possible because the binding source is not defined in this case. You may however take advantage of the PointTemplate property and achieve the same goal:

<telerikChart:BarSeries ItemsSource="{Binding}">
    <telerikChart:BarSeries.ValueBinding>
        <telerikChart:PropertyNameDataPointBinding PropertyName="Value"/>
    </telerikChart:BarSeries.ValueBinding>
    <telerikChart:BarSeries.PointTemplate>
        <DataTemplate>
            <Border>
                <Border.Background>
                    <SolidColorBrush Color="{Binding DataItem.Color}"/>
                </Border.Background>
            </Border>
        </DataTemplate>
    </telerikChart:BarSeries.PointTemplate>
</telerikChart:BarSeries>

Please note that in this case you are delegating View-specific properties to your business model.

I hope this helps. Let me know if I can help you in some other way.

Kind regards,
Georgi
the Telerik team

[Gokul]

Hello,
After trying out the above code in my Barseries PointTemplate to modify the color of the bar, RadLegend control doesn't appear.

Attached the code below:
<Primitives:RadLegendControl LegendProvider="{Binding ElementName=RadChart}" Margin="5" VerticalAlignment="Top" HorizontalAlignment="Right">
                        <Primitives:RadLegendControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <StackPanel Orientation="Vertical"/>
                            </ItemsPanelTemplate>
                        </Primitives:RadLegendControl.ItemsPanel>
                        <Primitives:RadLegendControl.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <Rectangle Fill="{Binding Fill}" Stroke="{Binding Stroke}" StrokeThickness="1" Width="10" Height="10"></Rectangle>
                                    <TextBlock Text="{Binding Title}" Foreground="{Binding Fill}"  Margin="10" FontStyle="Oblique">
                                    </TextBlock>
                                </StackPanel>
                            </DataTemplate>
                        </Primitives:RadLegendControl.ItemTemplate>
                    </Primitives:RadLegendControl>

[Ivaylo Gergov]

Hi Gokul,

Thank you for your interest.

It appears that RadLegendControl takes into account Brush and Stroke only from the applied palette(if there is such). I will discuss this with our development team and I will contact you shortly with more information.

I hope this information is useful.

 

Kind regards,
Ivaylo Gergov
the Telerik team

[Ivaylo Gergov]

Hello Gokul,

Just a quick follow-up -- when you are using custom item visualization logic (BarSeries.PointTemplate property is set), RadLegendControl cannot extract the proper colorization from the custom visuals as it does not know their type (that is why legend fill/stroke is extracted properly only for default visuals and only when chart palette is set).

As for your scenario -- if I understand you correctly, you are using the BarSeries.PointTemplate to assign different color to each bar; if you would like the legend control to reflect that, you will need to create the legend items with proper Stroke/Fill settings manually for the time being (in this case you need to remove the setting of the RadLegendControl.LegendProvider property).

Also, the latest version of RadCartesianChart supports second approach (besides using custom BarSeries.PointTemplate) to achieve a scenario where each bar is colorized in a different color -- you only need to set the BarSeries.PaletteMode property to "DataPoint" (in this case you also need to set the RadCartesianChart.Palette property). Note, however, that even when PaletteMode is set to "DataPoint", the RadLegendControl will only generate single legend item for the bar series (and not legend item for each bar) -- we will address this problem with the next official version of the control.

Hope this helps.

 

Regards,
Ivaylo Gergov
the Telerik team

[Francisco]

Hi Georgi.

It's posible do this in Xamarin.Forms?

in advance thank you =)

[Ves]

Hi Francisco,

This is not available in our Xamarin Forms chart out of the box. Still, it can be achieved -- you can split the data source to several data sources with one item each. Then, use multiple series with each of these data sources. I have attached a small example.

Best regards,
Ves
Telerik by Progress