Legend and LineSeries

2 posts, 0 answers
  1. Valery
    Valery avatar
    65 posts
    Member since:
    May 2011

    Posted 28 Apr 2020 Link to this post

    By default, a legend is always drawn in a square shape. But it is very not convenient for LineSeries. Because in the legend you need to show not only the color, but also the type of line.

    You can, of course, create your own ElementShape (https://www.telerik.com/forums/change-shape-of-items-in-legend). But there is very little space (bounds.Width = 10 pixels) and it is impossible to qualitatively draw a line of a certain type, for example, an extra-long dotted line. 

    If you try to draw outside the bounding box, then the chart either always cuts everything outside the bounds of this rectangle (ChartElement.LegendElement.StackElement.Orientation = Orientation.Vertical), or partially and not quite right (ChartElement.LegendElement.StackElement.Orientation = Orientation.Horizontal)

    Example:

     

            private void LegendElement_VisualItemCreating(object sender, LegendItemElementCreatingEventArgs e)
            {
                e.ItemElement = new LegendItemElement(e.LegendItem);
                e.ItemElement.MarkerElement.Shape = new LineShape();
            }

        public class LineShape : ElementShape
        {
            public override GraphicsPath CreatePath(Rectangle bounds)
            {
                var path = new GraphicsPath();
                var rect = new Rectangle(bounds.X - 50, bounds.Y + bounds.Height / 2, bounds.Width + 50, 2);
                path.AddRectangle(rect);
                return path;
            }
        }

    What is the result drawn on the legend - see the attached image.

    Obviously, the logic of drawing a legend for LineSeries, should be completely different. Current version - definitely not satisfied

  2. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    4086 posts

    Posted 01 May 2020 Link to this post

    Hello, Valery, 

    The default size of the LegendItemMarker is 10,10. In the VisualItemCreating event you can set the ItemElement.MarkerElement.MinSize property to a different size and increase the width for example. However, for the custom shape, strive to draw the shape within the defined bounds. Otherwise, you will obtain overlapping with the legend text: 
            public RadForm1()
            {
                InitializeComponent();
                this.radChartView1.ChartElement.LegendElement.VisualItemCreating += LegendElement_VisualItemCreating;
    
                BarSeries barSeries = new BarSeries("Performance", "RepresentativeName");
                barSeries.LegendTitle = "Q1";
                barSeries.DataPoints.Add(new CategoricalDataPoint(177, "Harley"));
                barSeries.DataPoints.Add(new CategoricalDataPoint(128, "White"));
                barSeries.DataPoints.Add(new CategoricalDataPoint(143, "Smith"));
                barSeries.DataPoints.Add(new CategoricalDataPoint(111, "Jones"));
                barSeries.DataPoints.Add(new CategoricalDataPoint(118, "Marshall"));
                this.radChartView1.Series.Add(barSeries);
                BarSeries barSeries2 = new BarSeries("Performance", "RepresentativeName");
                barSeries2.LegendTitle = "Q2";
                barSeries2.DataPoints.Add(new CategoricalDataPoint(153, "Harley"));
                barSeries2.DataPoints.Add(new CategoricalDataPoint(141, "White"));
                barSeries2.DataPoints.Add(new CategoricalDataPoint(130, "Smith"));
                barSeries2.DataPoints.Add(new CategoricalDataPoint(88, "Jones"));
                barSeries2.DataPoints.Add(new CategoricalDataPoint(109, "Marshall"));
                this.radChartView1.Series.Add(barSeries2);
    
                this.radChartView1.ShowLegend = true;
                this.radChartView1.ChartElement.LegendElement.StackElement.Orientation = Orientation.Horizontal;
            }
            private void LegendElement_VisualItemCreating(object sender, LegendItemElementCreatingEventArgs e)
            {
                e.ItemElement = new LegendItemElement(e.LegendItem);
                e.ItemElement.MarkerElement.Shape = new  LineShape();
                e.ItemElement.MarkerElement.MinSize = new Size(50, 10);
            }
    
            public class LineShape : ElementShape
            {
                public override GraphicsPath CreatePath(Rectangle bounds)
                {
                    var path = new GraphicsPath();
                    var rect = new Rectangle(bounds.X , bounds.Y + bounds.Height / 2, bounds.Width , 2);
                    path.AddRectangle(rect);
                    return path;
                }
            }

    I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

    Regards,
    Dess | Tech Support Engineer, Sr.
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top