Legend flowing outside the Chart

[Jan Skovhus]

hi, is it possible to stack legend in two rows or more, instead of just one in the top of a chart?
Because legend is flowing outside the chart when there are many legend

like so:
Legend1 Legend2 Legend3 Legend4 Legend
Legend5 Legend6 Legend7 Legend8 Legend9

And not like so:
Legend1
Legend2
Legend3
Legend4
Legend5
Legend6
Legend7

Regards Jan

[Jan Skovhus]

It also seems to and bug when i put legend to the letf then tooltip is not in the right position (se image)

[George]

Hi Jan,

Thank you for writing.

You will need to use a custom layout in order to arrange the elements as you like. The following RadChartView will do the trick:

public class MyChartView : RadChartView
{
    protected override RadChartElement CreateChartElement()
    {
        return new MyChartElement();
    }
}

public class MyChartElement : RadChartElement
{
    protected override ChartLegendElement CreateChartLegendElement()
    {
        return new MyChartLegendElement(this.View.Area);
    }

    protected override Type ThemeEffectiveType
    {
        get
        {
            return typeof(RadChartElement);
        }
    }
}

public class MyChartLegendElement : ChartLegendElement
{
    public MyChartLegendElement(ChartArea chartArea)
        : base(chartArea)
    {
    }

    protected override StackLayoutElement CreateStackElement()
    {
        return new MyStackLayoutElement();
    }

}

public class MyStackLayoutElement : StackLayoutElement
{
    protected override SizeF MeasureOverride(SizeF availableSize)
    {
        if (this.Orientation == System.Windows.Forms.Orientation.Vertical)
        {
            return base.MeasureOverride(availableSize);
        }

        float width = 0;
        this.Children[0].Measure(availableSize);
        float height = this.Children[0].DesiredSize.Height;

        for (int i = 0; i < this.Children.Count; i++)
        {
            RadElement element = this.Children[i];
            element.Measure(availableSize);
            if (this.ElementShouldBeOnNextLine(element, width, availableSize))
            {
                height += element.DesiredSize.Height;
                width = 0;
            }

            width += element.DesiredSize.Width + this.ElementSpacing;
        }

        return new SizeF(availableSize.Width, height);
    }


    protected override SizeF ArrangeOverride(SizeF finalSize)
    {
        if (this.Orientation == System.Windows.Forms.Orientation.Vertical)
        {
            return base.ArrangeOverride(finalSize);
        }

        float width = 0;
        float height = 0;
        float tempHeight = 0;

        for (int i = 0; i < this.Children.Count; i++)
        {
            RadElement element = this.Children[i];
            if (this.ElementShouldBeOnNextLine(element, width, finalSize))
            {
                height += Math.Max(element.DesiredSize.Height, tempHeight);
                tempHeight = 0;
                width = 0;
            }

            tempHeight = Math.Max(element.DesiredSize.Height, tempHeight);
            var rect = new RectangleF(new PointF(width, height), element.DesiredSize);
            element.Arrange(rect);
            width += element.DesiredSize.Width;
        }

        return finalSize;
    }

    protected virtual bool ElementShouldBeOnNextLine(RadElement element, float currentWidth, SizeF availableSize)
    {
        if (currentWidth + element.DesiredSize.Width >= availableSize.Width)
        {
            return true;
        }

        return false;
    }
}

You can then set it on top and with horizontal orientation:

this.Chart.ChartElement.LegendElement.StackElement.Orientation = Orientation.Horizontal;
this.Chart.ChartElement.LegendPosition = LegendPosition.Top;

I hope this helps.

Regards,
George
Telerik