Change shape of items in Legend

3 posts, 0 answers
  1. Chris Ward
    Chris Ward avatar
    56 posts
    Member since:
    Jan 2010

    Posted 24 May Link to this post

    Hello,

    In the chart legend, I would like to show a line next to an item instead of a square.  For the ChartView for Winforms I have been unable to find any information on the ability to change the shape.  Is that possible?

     

    As I work around, I had an idea to set the top and bottom border as white and increase the border size thinking that I could make the square look like a line I tried that with the following code, but it seems to have no affect. The default black border is sown instead.

    LegendItem item = new LegendItem();
    item.Element.BackColor = Color.Blue;
    item.Element.BorderBottomColor = Color.White;
    item.Element.BorderTopColor = Color.White;
    item.Element.BorderTopWidth = 3;
    item.Element.BorderBottomWidth = 3;
    this.mainChart.ChartElement.LegendElement.Items.Add(item);

     

    I am able to change the entire border using the following code. It displays a smaller square, which is kind of acceptable but there seems to be a shadow still visible.

    LegendItem item = new LegendItem();
    item.Element.BackColor = Color.Blue;
    item.Element.BorderColor = Color.White;
    item.Element.BorderWidth = 3;
    this.mainChart.ChartElement.LegendElement.Items.Add(item);

     

    Any ideas on how to achieve my goal?

     

    Chris

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

    Posted 27 May Link to this post

    Hello, Chris,    

    To be honest, your approach is a tricky one, but it may achieve your goal. Well done!

    However, I can suggest you a simpler approach. Actually, the square next to the legend text represents a LegendItemMarker which is a derivative of LightVisualElement. You can handle the ChartElement.LegendElement.VisualItemCreating event, create the default LegendItemElement and assign an ElementShape to the ItemElement.MarkerElement.Shape:

    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;
    }
     
    private void LegendElement_VisualItemCreating(object sender, LegendItemElementCreatingEventArgs e)
    {
        e.ItemElement = new LegendItemElement(e.LegendItem);
        e.ItemElement.MarkerElement.Shape = new HeartShape();
    }



    You can also create your own ElementShape and draw a single line as it is demonstrated below:

    private void LegendElement_VisualItemCreating(object sender, LegendItemElementCreatingEventArgs e)
    {
        e.ItemElement = new LegendItemElement(e.LegendItem);
        e.ItemElement.MarkerElement.Shape =new Line();
    }
     
    public class Line : ElementShape
    {
        public override GraphicsPath CreatePath(Rectangle bounds)
        {
            GraphicsPath path = new GraphicsPath();
             
            Point start = new Point(bounds.X, bounds.Y);
            Point end = new Point(bounds.X + bounds.Width, bounds.Y);
            path.AddLine(start, end);
            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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Chris Ward
    Chris Ward avatar
    56 posts
    Member since:
    Jan 2010

    Posted 28 May in reply to Dess | Tech Support Engineer, Sr. Link to this post

    Hi Dess,

     

    That is perfect.  

     

    Thank you so much.

    Chris

     

Back to Top