Change shape of items in Legend

[Chris Ward]

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

[Dess | Tech Support Engineer, Principal]

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

[Chris Ward]

Hi Dess,

 

That is perfect.  

 

Thank you so much.

Chris