Articles in this section
Category / Section

How to customize the legend Icon based on series appearance in WPF Chart?

2 mins read

This article describes how to customize the legend icon based on series appearance in WPF Chart by following the below 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. 


XAML:

    <Grid>
        <Grid.DataContext>
            <local:ViewModel/>
        </Grid.DataContext>
        <chart:SfChart Margin="10">             <chart:SfChart.Legend>                 <chart:ChartLegend/>             </chart:SfChart.Legend>
            <chart:SfChart.PrimaryAxis>                 <chart:CategoryAxis LabelFormat="MMM/dd"/>             </chart:SfChart.PrimaryAxis>
            <chart:SfChart.SecondaryAxis>                 <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>  

 C#:

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

For more details, please refer to the project on GitHub.

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


Conclusion

I hope you enjoyed learning how to customize the legend Icon based on series appearance in WPF Chart.

You can refer to our WPF Chart feature tour page know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WPF Chart Examples to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

 

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied