New to Telerik UI for WPF? Download free 30-day trial

Custom Item Style

This feature allows you to create a custom style and apply it to a number of chart items. The feature is represented by a delegate which should create and return the desired style. This allows you to create custom styles for the individual chart items depending on your custom logic. To learn more read on.

The delegate accepts four parameters:

  • Control item - represents the chart item that is currently processed. This could be either a derivative of the BaseChartItem ( Bar, Bubble, Pie, Stick, etc.), or a derivative of the SelfDrawingSeries ( LineSeries, SplineSeries, AreaSeries, SplineAreaSeries, etc). or a SeriesItemLabel, or a ChartLegendItem.

  • Style style - represents the style that would be applied to the respective chart item by default. You can use it to set the Style.BasedOn property of the style created by the delegate.

  • DataPoint dataPoint - represents the DataPoint associated with the processed chart item. Note that its value will be null if the chart item is of type SelfDrawingSeries.

  • DataSeries dataSeries - represents the DataSeries associated with the chart item.

To set the delegate you have to use the CreateItemStyleDelegate property. Here is an example of how to set it.

The Style style argument will have the following TargetType depending on the different values of the Control item argument:

  • BaseChartItem - Shape

  • SelfDrawingSeries - SelfDrawingSeries

  • SeriesItemLabel - SeriesitemLabel

  • ChartLegendItem - Path

public Sample() 
{ 
    InitializeComponent(); 
    this.radChart.CreateItemStyleDelegate = this.BuildCustomItemStyle; 
} 
public Style BuildCustomItemStyle(Control item, Style style, DataPoint point, DataSeries dataSeries ) 
{ 
    Style newStyle = new Style(); 
    newStyle.BasedOn = style; 
    return newStyle; 
} 

The following sample demonstrates a more complex logic inside the delegate - how to color the bars in a specific color, depending on their value. If the Bar's YValue is greater than 300 the Bar will be colored red, otherwise it should be green. Since changing the colors of the Bars won't affect their Labels (they will remain with the default color) another CustomItemStyle is used to color them accordingly. Finally the LegendItem's color is changed so that it corresponds to the Bar's colors.

public partial class MainPage : UserControl 
{ 
    public MainPage() 
    { 
        InitializeComponent(); 
        int maxItems = 10; 
        Random r = new Random(); 
 
        List<Company> sampleData = new List<Company>(); 
 
        for (int i = 0; i < maxItems; i++) 
        { 
            sampleData.Add(new Company(r.Next(200, 400))); 
        } 
 
        SeriesMapping seriesMapping = new SeriesMapping(); 
        seriesMapping.LegendLabel = "My Custom Bars"; 
        seriesMapping.SeriesDefinition = new BarSeriesDefinition(); 
        seriesMapping.ItemMappings.Add(new ItemMapping("PurchasePrice", DataPointMember.YValue)); 
 
        this.RadChart1.ItemsSource = sampleData; 
        this.RadChart1.SeriesMappings.Add(seriesMapping); 
 
        this.RadChart1.CreateItemStyleDelegate = BuildCustomItemStyle; 
 
    } 
 
    public class Company 
    { 
        public double PurchasePrice { get; set; } 
 
        public Company(double price) 
        { 
            PurchasePrice = price; 
        } 
    } 
 
    public Style BuildCustomItemStyle(Control item, Style style, DataPoint point, DataSeries dataSeries) 
    { 
        Style newStyle = new Style(style.TargetType); 
        newStyle.BasedOn = style; 
        Brush brush; 
 
        if (item is BaseChartItem) 
        { 
            if (dataSeries[(item as BaseChartItem).CurrentIndex].YValue > 300) 
            { 
                brush = new SolidColorBrush(Colors.Red); 
            } 
            else 
            { 
                brush = new SolidColorBrush(Colors.Green); 
            } 
            newStyle.Setters.Add(new Setter(Shape.FillProperty, brush)); 
        } 
 
        if (item is SeriesItemLabel) 
        { 
            if ((item as SeriesItemLabel).DataPoint.YValue > 300) 
                brush = new SolidColorBrush(Colors.Red); 
            else 
                brush = new SolidColorBrush(Colors.Green); 
            newStyle.Setters.Add(new Setter(SeriesItemLabel.FillProperty, brush)); 
            newStyle.Setters.Add(new Setter(SeriesItemLabel.StrokeProperty, brush)); 
        } 
        if (item is ChartLegendItem) 
        { 
            brush = this.Resources["LegendItemStyle"] as Brush; 
            newStyle.Setters.Add(new Setter(Path.FillProperty, brush)); 
        } 
 
        return newStyle; 
    } 
} 

The LegendItemStyle used :

<LinearGradientBrush x:Key="LegendItemStyle" EndPoint="1,1" StartPoint="0,0"> 
<GradientStop Color="Red" Offset="0"/> 
<GradientStop Color="Red" Offset="0.5"/> 
<GradientStop Color="Green" Offset="0.51"/> 
<GradientStop Color="Green" Offset="1"/> 
</LinearGradientBrush> 

The picture below demonstrates the result:

WPF RadChart

In this article