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

Legend flowing outside the Chart

2 Answers 53 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Jan Skovhus
Top achievements
Rank 1
Jan Skovhus asked on 11 Sep 2014, 02:41 PM
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

2 Answers, 1 is accepted

Sort by
0
Jan Skovhus
Top achievements
Rank 1
answered on 12 Sep 2014, 07:34 AM
It also seems to and bug when i put legend to the letf then tooltip is not in the right position (se image)
0
George
Telerik team
answered on 16 Sep 2014, 12:48 PM
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
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
Tags
ChartView
Asked by
Jan Skovhus
Top achievements
Rank 1
Answers by
Jan Skovhus
Top achievements
Rank 1
George
Telerik team
Share this question
or