ComponentOne FlexChart for WinForms
Custom Legend Icon
FlexChart > Working with FlexChart > FlexChart Elements > Legend > Custom Legend Icon

FlexChart allows you to apply custom image or icon for customizing the legend items. To enable FlexChart to display custom legend icon, implement the GetLegendItemImageSource method provided by ISeries interface. This method primarily accepts two parameters; index and _size. The index parameter refers to the legend item position and _size parameter refers to the default legend icon size.

In the example code below, we have implemented the GetLegendItemImageSource method to customize the image size and draw a border around it. This method then returns the image object. To apply the custom legend icon add object of the class SeriesWithPointLegendItems to the chart Series collection.

The image shows how FlexChart appears after using custom legend icon.

Add the following code in Form1.cs file.

Public Class Form1
    Inherits Form
    
    Public Sub New()
        MyBase.New
        InitializeComponent
    End Sub
    
    Private Shared vendors As List(Of SmartPhoneVendor) = New List(Of SmartPhoneVendor)
    Private Shared LegendIconImage As Image = Properties.Resources.usa
    Private customSeries As Series
    
    Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
        vendors = SmartPhoneVendors
        ' Set a Data Source
        flexChart1.DataSource = vendors
        flexChart1.BindingX = "Name"
        flexChart1.Binding = "Sales"
        flexChart1.Header.Style.Font = New Font(FontFamily.GenericSansSerif, 15)
        flexChart1.Header.Content = "Top Smartphone Vendors"
        flexChart1.Series.Clear
        'Add custom series
        Me.customSeries = New SeriesWithPointLegendItems
        Me.customSeries.Name = "Sales in USA"
        flexChart1.Series.Add(Me.customSeries)
        flexChart1.Legend.Position = Position.Left
        flexChart1.ToolTip.Content = "{seriesName}"& vbCrLf&"{value}"
    End Sub
    
    Public Class SeriesWithPointLegendItems
        Inherits Series
        Implements ISeries
        
        Function ISeries_GetLegendItemImageSource_((ByVal index As Integer, ByRef imageSize As C1.Chart._Size) As Object Implements ISeries.GetLegendItemImageSource.(
            ' Original images/logos are all 50x50 pixels.
            ' Here they are replaced with new images where a 5 pixel border is added
            ' around the logos.
            imageSize.Height = 60
            imageSize.Width = 60
            Dim vendor As SmartPhoneVendor = vendors.ElementAt(index)
            If ((Not (LegendIconImage) Is Nothing)  _
                        AndAlso (LegendIconImage.Width <> 60)) Then
                Dim bmp As Bitmap = New Bitmap(60, 60)
                Dim sb As SolidBrush = New SolidBrush(vendor.Color)
                Dim g As Graphics = Graphics.FromImage(bmp)
                Dim r As Rectangle = New Rectangle(0, 0, CType(imageSize.Width,Integer), CType(imageSize.Height,Integer))
                Dim p As Pen = New Pen(sb)
                g.DrawRectangle(p, r)
                g.FillRectangle(sb, r)
                Dim ci As Point = New Point(CType((0.5  _
                                * (imageSize.Width - LegendIconImage.Width)),Integer), CType((0.5  _
                                * (imageSize.Height - LegendIconImage.Height)),Integer))
                g.DrawImage(LegendIconImage, ci)
                LegendIconImage = bmp
            End If
            
            ' Keep the original size of the logo bitmaps, but reduce their size if the chart window
            ' is too small to display the bitmaps properly.
            Dim bounds As Size = Me.Chart.ClientSize
            Dim divadj As Double = 12
            Dim fracHeight As Double = (bounds.Height / divadj)
            If (fracHeight < imageSize.Height) Then
                imageSize.Height = fracHeight
            End If
            
            imageSize.Width = fracHeight
            Return LegendIconImage
        End Function
    End Class
    
Private Shared Function SmartPhoneVendors() As List(Of SmartPhoneVendor)
    vendors.Add(New SmartPhoneVendor() With {.Name = "Apple", .Color = Color.FromArgb(136, 189, 230), .Sales = 350})
    vendors.Add(New SmartPhoneVendor() With {.Name = "LG", .Color = Color.FromArgb(251, 178, 88), .Sales = 120})
    vendors.Add(New SmartPhoneVendor() With {.Name = "Samsung", .Color = Color.FromArgb(188, 153, 199), .Sales = 280})
    vendors.Add(New SmartPhoneVendor() With {.Name = "Xiaomi", .Color = Color.FromArgb(240, 126, 110), .Sales = 68})
    Return vendors
End Function
    
Public Class SmartPhoneVendor

    Public Property Name As String

    Public Property Sales As Double

    Public Property Color As Color
End Class
    
End Class
public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }
        static List<SmartPhoneVendor> vendors = new List<SmartPhoneVendor>();
        static Image LegendIconImage = Properties.Resources.usa;
        Series customSeries;
        private void Form1_Load(object sender, EventArgs e)
        {
            vendors = SmartPhoneVendors();
            // Set a Data Source
            flexChart1.DataSource = vendors;
            flexChart1.BindingX = "Name";
            flexChart1.Binding = "Sales";
            flexChart1.Header.Style.Font = new Font(FontFamily.GenericSansSerif, 15);
            flexChart1.Header.Content = "Top Smartphone Vendors";
            flexChart1.Series.Clear();

            //Add custom series
            customSeries = new SeriesWithPointLegendItems();
            customSeries.Name = "Sales in USA";
            flexChart1.Series.Add(customSeries);
            flexChart1.Legend.Position = Position.Left;
            flexChart1.ToolTip.Content = "{seriesName}\r\n{value}";
        }
        public class SeriesWithPointLegendItems : Series, ISeries
        {
            object ISeries.GetLegendItemImageSource(int index, ref C1.Chart._Size imageSize)
            {
                {
                    // Original images/logos are all 50x50 pixels.
                    // Here they are replaced with new images where a 5 pixel border is added
                    // around the logos.
                    imageSize.Height = 60;
                    imageSize.Width = 60;

                    SmartPhoneVendor vendor = vendors.ElementAt(index);
                    if (LegendIconImage != null && LegendIconImage.Width != 60)
                    {
                        Bitmap bmp = new Bitmap(60, 60);
                        using (SolidBrush sb = new SolidBrush(vendor.Color))
                        {
                            using (Graphics g = Graphics.FromImage(bmp))
                            {
                                Rectangle r = new Rectangle(0, 0, (int)imageSize.Width, (int)imageSize.Height);
                                using (Pen p = new Pen(sb))
                                {
                                    g.DrawRectangle(p, r);
                                }
                                g.FillRectangle(sb, r);

                                Point ci = new Point((int)(0.5 * (imageSize.Width - LegendIconImage.Width)),
                                    (int)(0.5 * (imageSize.Height - LegendIconImage.Height)));
                                g.DrawImage(LegendIconImage, ci);
                            }
                        }
                        LegendIconImage = bmp;
                    }
                    // Keep the original size of the logo bitmaps, but reduce their size if the chart window
                    // is too small to display the bitmaps properly.
                    Size bounds = this.Chart.ClientSize;
                    double divadj = (bounds.Height > 800) ? 12 : 25;
                    double fracHeight = bounds.Height / divadj;
                    if (fracHeight < imageSize.Height)
                        imageSize.Width = imageSize.Height = fracHeight;
                    return LegendIconImage;
                }
            }
        }
        private static List<SmartPhoneVendor> SmartPhoneVendors()
        {

            vendors.Add(new SmartPhoneVendor()
            {
                Name = "Apple",
                Color = Color.FromArgb(136, 189, 230),
                Sales = 350,
            });
            vendors.Add(new SmartPhoneVendor()
            {
                Name = "LG",
                Color = Color.FromArgb(251, 178, 88),
                Sales = 120,
            });
           
            vendors.Add(new SmartPhoneVendor()
            {
                Name = "Samsung",
                Color = Color.FromArgb(188, 153, 199),
                Sales = 280,
            });
          
            vendors.Add(new SmartPhoneVendor()
            {
                Name = "Xiaomi",
                Color = Color.FromArgb(240, 126, 110),
                Sales = 68,
            });

            return vendors;
        }
        public class SmartPhoneVendor
        {
            public string Name { get; set; }
            public double Sales { get; set; }
            public Color Color { get; set; }
        }
    }
See Also