RadCartesianChart - BarSeries - Different colors for positive and negative values

1 Answer 27 Views
Chart ChartView Styling
Harald
Top achievements
Rank 1
Harald asked on 26 Dec 2021, 08:33 PM

How can I use different colors for positive and negative values?

This is my XAML Code:

                    <telerik:RadCartesianChart x:Name="DashboardChart" FontSize="{telerik:FluentResource ResourceKey=FontSizeS}">
                        <telerik:RadCartesianChart.HorizontalAxis>
                            <telerik:CategoricalAxis />
                        </telerik:RadCartesianChart.HorizontalAxis>
                        <telerik:RadCartesianChart.VerticalAxis>
                            <telerik:LinearAxis LabelInterval="5"/>
                        </telerik:RadCartesianChart.VerticalAxis>
                        <telerik:RadCartesianChart.Series>
                            <telerik:BarSeries x:Name="DashboardChartBarSeries" ValueBinding="Difference" >
                            </telerik:BarSeries>
                        </telerik:RadCartesianChart.Series>
                    </telerik:RadCartesianChart>

The data binding is done in the C# code:

this.DashboardChartBarSeries.DataContext = _localViewModel.Document;
 The values are displayed correctly. I would like to display negative values in red and positive values in green. How can I implement this?

1 Answer, 1 is accepted

Sort by
0
Accepted
Stenly
Telerik team
answered on 27 Dec 2021, 08:48 AM

Hello Harald,

One way of achieving the wanted result is by creating a new class that derives from the StyleSelector class. In the newly created class, override the SelectStyle method, and depending on your application's requirements, return a different style property. The item parameter of the method will be of type CategoricalDataPoint, so you could cast it and utilize its properties. Then, define the StyleSelector as a resource and set different styles for its properties (in this example the properties are named NegativeStyle and PositiveStyle). To change the color of the bars, target the Border element (of each style for the properties) and set its Background property to the desired color. Finally, set the newly created StyleSelector to the DefaultVisualStyleSelector property of the BarSeries series. 

The following code snippets show this logic's implementation:

public class CustomStyleSelector : StyleSelector
{
    public Style NegativeStyle { get; set; }
    public Style PositiveStyle { get; set; }

    public override Style SelectStyle(object item, DependencyObject container)
    {
        if (item is CategoricalDataPoint)
        {
            var myItem = item as CategoricalDataPoint;

            if (myItem.Value < 0)
            {
                return NegativeStyle;
            }

            return PositiveStyle;
        }

        return null;
    }
}
<local:CustomStyleSelector x:Key="CustomStyleSelector">
    <local:CustomStyleSelector.PositiveStyle>
        <Style TargetType="Border">
            <Setter Property="Background" Value="Green"/>
        </Style>
    </local:CustomStyleSelector.PositiveStyle>
    <local:CustomStyleSelector.NegativeStyle>
        <Style TargetType="Border">
            <Setter Property="Background" Value="Red"/>
        </Style>
    </local:CustomStyleSelector.NegativeStyle>
</local:CustomStyleSelector>
<telerik:RadCartesianChart x:Name="DashboardChart" FontSize="{telerik:FluentResource ResourceKey=FontSizeS}">
    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:CategoricalAxis />
    </telerik:RadCartesianChart.HorizontalAxis>
    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:LinearAxis LabelInterval="5"/>
    </telerik:RadCartesianChart.VerticalAxis>
    <telerik:RadCartesianChart.Series>
        <telerik:BarSeries x:Name="DashboardChartBarSeries" 
				   ValueBinding="Difference"
				   DefaultVisualStyleSelector="{StaticResource CustomStyleSelector}">
        </telerik:BarSeries>
    </telerik:RadCartesianChart.Series>
</telerik:RadCartesianChart>

Please note that you could further customize the look of the bar series by extending the styles of the StyleSelector's properties.

With that said, I have attached a sample project for you to test, so, could you give it a try?

Regards,
Stenly
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Harald
Top achievements
Rank 1
commented on 01 Jan 2022, 04:56 PM

Thank you for the answer. The example helps to implement the function. I make the following small change:

 <telerik:RadCartesianChart.Series>
                                <telerik:BarSeries x:Name="DashboardChartBarSeries" ValueBinding="Difference" 
                                                   DefaultVisualStyleSelector="{StaticResource StyleSelector}"/>
                            </telerik:RadCartesianChart.Series>

Tags
Chart ChartView Styling
Asked by
Harald
Top achievements
Rank 1
Answers by
Stenly
Telerik team
Share this question
or