How To Customize The Legend Icon Based On Series Appearance In WPF Chart (Sfchart)?

Sample date Updated on Sep 13, 2025
chart charts legend legend-icon series wpf-chart

This example illustrates how to customize the legend icon based on series appearance in WPF Chart by following these steps:

Step 1: You can display dotted lines in FastLineSeries by using the StrokeDashArray property.

Step 2: The customized line style of FastLineSeries can be shown in the legend icon by applying the LegendIconTemplate as shown in the following code example.

<Grid>
    <Grid.DataContext>
        <local:ViewModel></local:ViewModel>
    </Grid.DataContext>
    <chart:SfChart Margin="10">
        <chart:SfChart.Legend>
            <chart:ChartLegend></chart:ChartLegend>
        </chart:SfChart.Legend>
        <chart:SfChart.PrimaryAxis>
            <chart:CategoryAxis  LabelFormat="MMM/dd"></chart:CategoryAxis>
        </chart:SfChart.PrimaryAxis>
        <chart:SfChart.SecondaryAxis>
            <chart:NumericalAxis ></chart:NumericalAxis>
        </chart:SfChart.SecondaryAxis>
        <chart:FastLineSeries Label="Series 1" StrokeDashArray="1,1" ItemsSource="{Binding DataCollection}" XBindingPath="Date" YBindingPath="Value">
            <chart:FastLineSeries.LegendIconTemplate>
                <DataTemplate >
                    <Polyline Points="0,8,25,8" Stroke="{Binding Interior}" StrokeThickness="{Binding StrokeThickness}" StrokeDashArray="1,1"/>
                </DataTemplate>
            </chart:FastLineSeries.LegendIconTemplate>
        </chart:FastLineSeries>
    </chart:SfChart>
</Grid>
public class Data
{
    public Data(DateTime date, double value)
    {
        Date = date;
        Value = value;
    }

    public DateTime Date
    {
        get;
        set;
    }

    public double Value
    {
        get;
        set;
    }
}
public class ViewModel
{
    public int DataCount = 100;

    private Random randomNumber;

    public ObservableCollection<Data> DataCollection { get; set; }

    public ViewModel()
    {
        randomNumber = new Random();
        DataCollection = GenerateData();
    }

    public ObservableCollection<Data> GenerateData()
    {
        ObservableCollection<Data> datas = new ObservableCollection<Data>();

        DateTime date = new DateTime(2000, 1, 1);
        double value = 100;
        for (int i = 0; i < this.DataCount; i++)
        {
            datas.Add(new Data(date, value));
            date = date.Add(TimeSpan.FromDays(5));

            if (randomNumber.NextDouble() > .5)
            {
                value += randomNumber.NextDouble();
            }
            else
            {
                value -= randomNumber.NextDouble();
            }
        }

        return datas;
    }
}

Output:

LegendIcon Customization WPF Chart

KB article - How to customize the legend icon based on series appearance in WPF Chart

See also

How to modify the label of each legend

How to achieve draggable legend in WPF Chart

How to create custom legend items in WPF Chart

How to wrap the text in WPF Chart Legend

How to format the legend text in Chart WPF

Up arrow