Legend and LineSeries

[Valery]

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

[Dess | Tech Support Engineer, Principal]

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