Custom Symbol Styles in C1Chart for WPF

This is yet another utility blog with ComponentOne WPF Chart wherein we will discuss how one can show Custom Images in place of the default Symbol styles in a 'LineSymbols' Chart.

Using Custom Images in DataSeries

When we need to use Custom images instead of default data symbols styles, we need to first create a Custom Style.

<Window.Resources>  
    <Style x:Key="happy" TargetType="{x:Type c1:PlotElement}">  
        <Setter Property="Stroke" Value="Transparent"/>  
        <Setter Property="Fill">  
            <Setter.Value>  
                <ImageBrush>  
                    <ImageBrush.ImageSource>  
                        <BitmapImage UriSource="pack://application:,,,/Images/happy.jpg"/>  
                    </ImageBrush.ImageSource>  
                </ImageBrush>  
            </Setter.Value>  
        </Setter>  
    </Style>  
</Window.Resources>  

Now, we can assign this style as 'SymbolStyle' for a particular DataSeries of Chart, either through XAML or via code : Through XAML :

<c1:DataSeries Label="Growth" SymbolStyle="{StaticResource happy}" SymbolMarker="Box"  SymbolSize="30,30" RenderMode="Default" Values="20 45 19 24 25 5 15 30 12 40" />

Through Code : Use the PlotElementLoaded event to achieve the same :

private void DataSeries_PlotElementLoaded(object sender, EventArgs e)  
{  
    PlotElement pe = (PlotElement)sender;  

    if (!(pe is Lines)) // skip lines  
    {  
        DataPoint dp = pe.DataPoint;  
        pe.Fill = new ImageBrush(new BitmapImage(new Uri("pack://application:,,,/Images/happy.jpg")));  
    }  
}

Using Different Custom Images for Single DataSeries

Many a times, one wishes to display two different symbol styles for a single series based on some condition.For instance, suppose for a set of values in a DataSeries, we want to display two different symbol styles based on the fact that, if the value is greater than 20 or less than 20. For this, we will create the style in XAML as above & handle the PlotElementLoaded event as follows :

private void DataSeries_PlotElementLoaded(object sender, EventArgs e)  
{  
    PlotElement pe = (PlotElement)sender;  

    if (!(pe is Lines)) // skip lines  
    {  
        DataPoint dp = pe.DataPoint;  
        pe.Stroke = Brushes.Transparent;  
        if (dp.Value <= 20)  
        {  
            pe.Fill = new ImageBrush(new BitmapImage(new Uri("pack://application:,,,/Images/sad.jpg")));  
        }  
        else if (dp.Value > 20)  
        {  
            pe.Fill = new ImageBrush(new BitmapImage(new Uri("pack://application:,,,/Images/happy.jpg")));  
        }  
    }  
}  

Download Sample CS Download Sample VB