ComponentOne FlexChart for UWP
FlexChart / Working with FlexChart / FlexChart Elements / FlexChart Legend / Custom Legend Icon
In This Topic
    Custom Legend Icon
    In This Topic

    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.

    Use the following code snippet to implement custom legend icon.

    Copy Code
    <Chart:C1FlexChart x:Name="flexChart" ItemsSource="{Binding SmartPhoneVendors}" Binding="Sales" BindingX="Name" Header="Top Smartphone Vendors" Grid.Row="1">
                <Chart:C1FlexChart.HeaderStyle>
                    <Chart:ChartStyle FontSize="15" FontFamily="GenericSansSerif"/>
                </Chart:C1FlexChart.HeaderStyle>
    </Chart:C1FlexChart>
    
    HTML
    Copy Code
    public partial class LegendItems
        {
            static List<SmartPhoneVendor> vendors = new List<SmartPhoneVendor>();
            static Image LegendIconImage = Properties.Resources.usa;
            Series customSeries;
            public LegendItems()
            {
                InitializeComponent();
                vendors = SmartPhoneVendors();       
    
                //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; }
            }
        }