This is a migrated thread and some comments may be shown as answers.

Legend and LineSeries

1 Answer 305 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Valery
Top achievements
Rank 1
Veteran
Valery asked on 28 Apr 2020, 11:22 AM

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

1 Answer, 1 is accepted

Sort by
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 01 May 2020, 06:30 AM
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.
Tags
ChartView
Asked by
Valery
Top achievements
Rank 1
Veteran
Answers by
Dess | Tech Support Engineer, Principal
Telerik team
Share this question
or