Color for CategoricalDataPoint

4 posts, 0 answers
  1. Igor
    Igor avatar
    4 posts
    Member since:
    Dec 2014

    Posted 14 Dec 2014 Link to this post

    I have RadCartesianChart with 10 CategoricalDataPoints. How can i set color for each CategoricalDataPoint programmatically?
  2. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 15 Dec 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for WPF is Visual Studio 2017 Ready
  4. Igor
    Igor avatar
    4 posts
    Member since:
    Dec 2014

    Posted 16 Dec 2014 in reply to Martin Link to this post

    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;
    }
  5. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 18 Dec 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top