RadCartesianChart - BarSeries - Different colors for positive and negative values

[Harald]

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?

[Stenly]

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

[Harald]

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>