Legend flowing outside the Chart

3 posts, 0 answers
  1. Jan Skovhus
    Jan Skovhus avatar
    7 posts
    Member since:
    Mar 2014

    Posted 11 Sep 2014 Link to this post

    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. Jan Skovhus
    Jan Skovhus avatar
    7 posts
    Member since:
    Mar 2014

    Posted 12 Sep 2014 Link to this post

    It also seems to and bug when i put legend to the letf then tooltip is not in the right position (se image)
  3. UI for WinForms is Visual Studio 2017 Ready
  4. George
    Admin
    George avatar
    500 posts

    Posted 16 Sep 2014 Link to this post

    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.
     
Back to Top