Color for CategoricalDataPoint

[Igor]

I have RadCartesianChart with 10 CategoricalDataPoints. How can i set color for each CategoricalDataPoint programmatically?

[Martin Ivanov]

Hi Igor,

Let me start with a short explanation on that how the chart's data points are visualized. Most chart series (except the line series) have a default visual elements that represents its data points. This element can be replaced through the PointTemplate of the series, which means that there is no guarantee that the point will be always visualized with the series' default visual. 

The color of the data points cannot be set through the (Categorical)DataPoint model. One of the reasons is that if there is a custom PointTemplate the model won't know what property this elements use for setting its color and if there is such property. 

To customize the color of the data points you can define a DefaultVisualStyle (or PointTemplate) and bind a Brush property from your view model to the color property of the visual element. 

<telerik:BarSeries.DefaultVisualStyle>
    <Style TargetType="Border">
        <Setter Property="Background" Value="{Binding DataItem.PointBrush}" />
    </Style>
</telerik:BarSeries.DefaultVisualStyle>

Where the DataItem is a property of the DataPoint object that holds a reference to the view model behind the point. You can take a look at the Customizing CatesianChart Series help article to see how to define DefaultVisualStyle or PointTemplate.

Regards,
Martin
Telerik

 

 

[Igor]

Thanks for information. I am afraid, this method does not suit me.
Can you help me in my case?
I have following chart (custom control)

<telerik:RadCartesianChart Name="cartesianChart">
      <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:CategoricalAxis/>
      </telerik:RadCartesianChart.HorizontalAxis>
      <telerik:RadCartesianChart.VerticalAxis>
        <telerik:LinearAxis />
      </telerik:RadCartesianChart.VerticalAxis>
      <telerik:RadCartesianChart.Series>
                <telerik:BarSeries x:Name="barchart" >
                    <telerik:BarSeries.DataPoints>
            <telerik:CategoricalDataPoint  x:Name="CategoricalDataPoint1" />
            <telerik:CategoricalDataPoint  x:Name="CategoricalDataPoint2" />
            <telerik:CategoricalDataPoint  x:Name="CategoricalDataPoint3" />
            <telerik:CategoricalDataPoint  x:Name="CategoricalDataPoint4" />
             </telerik:BarSeries.DataPoints>
        </telerik:BarSeries>
      </telerik:RadCartesianChart.Series>
    </telerik:RadCartesianChart>

I make binding in xaml for each datapoint - i'm not using collection for binding

<Chart
Prop0="{Binding Path=SelectedItem[column0], ElementName=GridView,  UpdateSourceTrigger=PropertyChanged}"
Prop1="{Binding Path=SelectedItem[column1], ElementName=GridView,  UpdateSourceTrigger=PropertyChanged}"
Prop2="{Binding Path=SelectedItem[column2], ElementName=GridView,  UpdateSourceTrigger=PropertyChanged}"
Prop3="{Binding Path=SelectedItem[column3], ElementName=GridView,  UpdateSourceTrigger=PropertyChanged}"
/>

CodeBehind:

public static void OnProp0PropertyChanged(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs e)
{
    (dependencyObject as Chart).CategoricalDataPoint0.Value = (double)e.NewValue;
}

[Martin Ivanov]

Hello Igor,

Another approach for setting a different color for each point is to use a binding with an IValueConverter in the DefaultVisualStyle. For example, inside the converter you can check the value of the data point and if it falls in a specific range set the corresponding color.

Here is an example in code for such implementation:

<telerik:BarSeries.DefaultVisualStyle>
    <Style TargetType="Border">
        <Setter Property="Background" Value="{Binding Converter={StaticResource dataPointToBrushConverter}}" />
    </Style>
</telerik:BarSeries.DefaultVisualStyle>

.

public class DataPointToBrushConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        var point = value as CategoricalDataPoint;
        if(point.Value >= 10 && point.Value < 20)
        {
            return Brushes.Green;
        }
        else
        {
            return Brushes.Red;
        }
    }
    .....
}

Please let me know if this approach works for you.

Regards,
Martin
Telerik

 

 

[brian]

I know this is an old post, but could someone assist me in converting this to vb.net? I can' seem to make it work.

 

Thanks

 

[Martin Ivanov]

Hi Brian,

You can try this:

<Grid>
    <Grid.Resources>
        <local:DataPointToBrushConverter x:Key="dataPointToBrushConverter" />
    </Grid.Resources>
    <telerik:RadCartesianChart>
        <telerik:RadCartesianChart.VerticalAxis>
            <telerik:LinearAxis />
        </telerik:RadCartesianChart.VerticalAxis>
        <telerik:RadCartesianChart.HorizontalAxis>
            <telerik:CategoricalAxis />
        </telerik:RadCartesianChart.HorizontalAxis>
        <telerik:RadCartesianChart.Series>
            <telerik:BarSeries CombineMode="None">
                <telerik:BarSeries.DefaultVisualStyle>
                    <Style TargetType="Border">
                        <Setter Property="Background" Value="{Binding Converter={StaticResource dataPointToBrushConverter}}" />
                    </Style>
                </telerik:BarSeries.DefaultVisualStyle>
                <telerik:BarSeries.DataPoints>
                    <telerik:CategoricalDataPoint Category="1" Value="33" />
                    <telerik:CategoricalDataPoint Category="2" Value="15" />
                    <telerik:CategoricalDataPoint Category="3" Value="6" />
                </telerik:BarSeries.DataPoints>
            </telerik:BarSeries>
        </telerik:RadCartesianChart.Series>
    </telerik:RadCartesianChart>
</Grid>

Public Class DataPointToBrushConverter
    Implements IValueConverter

    Public Function Convert(value As Object, targetType As Type, parameter As Object, culture As Globalization.CultureInfo) As Object Implements IValueConverter.Convert
        Dim point = TryCast(value, CategoricalDataPoint)
        If point.Value >= 10 AndAlso point.Value < 20 Then
            Return Brushes.Green
        Else
            Return Brushes.Red
        End If
    End Function

    Public Function ConvertBack(value As Object, targetType As Type, parameter As Object, culture As Globalization.CultureInfo) As Object Implements IValueConverter.ConvertBack
        Throw New NotImplementedException()
    End Function
End Class

Regards,
Martin
Telerik by Progress

[Trump]

Hello,

I use the same method and converter. The different thing is that I added ShowLabel=True in the BarSeries. I want to show the values on the bars. However it doesn't show the numbers. It shows the object name.

Telerik.Charting.CategoricalDataPoint

So what is wrong?

[Martin Ivanov]

Hello Trump,

Without your setup I cannot be sure what is going on, but my guess here is that there is a custom LabelDefinition added in the series LabelDefinitions collection. If this is your case you may need to set the Binding or the Template property of the ChartSeriesLabelDefinition. If this doesn't help I would ask you to post some runnable code snippets demonstrating the described behavior and I will check what could be reason behind this.

Regards,
Martin Ivanov
Progress Telerik