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

Change shape of items in Legend

2 Answers 323 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Chris Ward
Top achievements
Rank 1
Chris Ward asked on 24 May 2019, 05:27 PM

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 Answers, 1 is accepted

Sort by
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 27 May 2019, 01:02 PM
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.
0
Chris Ward
Top achievements
Rank 1
answered on 28 May 2019, 12:48 PM

Hi Dess,

 

That is perfect.  

 

Thank you so much.

Chris

 

Tags
ChartView
Asked by
Chris Ward
Top achievements
Rank 1
Answers by
Dess | Tech Support Engineer, Principal
Telerik team
Chris Ward
Top achievements
Rank 1
Share this question
or