Legend items horizontal instead of vertical

7 posts, 1 answers
  1. Patrick
    Patrick avatar
    8 posts
    Member since:
    Oct 2017

    Posted 03 Sep 2018 Link to this post

    Hi.

    Probably an easy question, but trying for a while, searching in the doc and the forum, I could not find the solution.

    When I use a legend in radchartview, it shows the items below each other (vertically). But I would like to show them next to each other (horizontally).

    Among others, I tried:

     this.radChartView2.ChartElement.LegendElement.TextOrientation = Orientation.Horizontal;

    or

     this.radChartView2.ChartElement.LegendElement.StackElement.TextOrientation = Orientation.Horizontal;

    But it does not seem to work...

    Thank you

     

     

  2.
  3. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr. avatar
    3637 posts

    Posted 04 Sep 2018 Link to this post

    Hello, Patrick,         

    Here is demonstrated a sample code snippet how to make the legend items horizontally aligned:


    public RadForm1()
    {
        InitializeComponent();
     
        for (int i = 0; i < 10; i++)
        {
            BarSeries barSeries = new BarSeries("Performance", "RepresentativeName");
            barSeries.LegendTitle = "Q"+i;
            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);
        }
     
        this.radChartView1.ShowLegend = true;
        this.radChartView1.ChartElement.LegendPosition = LegendPosition.Bottom;
        this.radChartView1.ChartElement.LegendElement.StackElement.Orientation = Orientation.Horizontal;
    }

    I hope this information helps. If you have any additional questions, please let me know.  
     
    Regards,
    Dess
    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.
  5. Patrick
    Patrick avatar
    8 posts
    Member since:
    Oct 2017

    Posted 04 Sep 2018 Link to this post

    Hello Dess,

    thx for the quick answer, but I am still not sure how to implement this in my code:

     

    this.radChartView2.Series.Add(ss);
    this.radChartView2.Series.Add(tpz);
    ...
     
    this.radChartView2.ShowLegend = true;
    this.radChartView2.ChartElement.LegendPosition = LegendPosition.Bottom;
    this.radChartView2.ChartElement.LegendElement.StackElement.TextOrientation = Orientation.Horizontal;

     

    I add two data series which are drawn in the radChartView-component, but the legend entries are shown vertically (see attached pic)

  7. Answer
    Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr. avatar
    3637 posts

    Posted 04 Sep 2018 Link to this post

    Hello, Patrick,         

    I have attached my sample project for your reference. Am I missing something? Do I need to perform any changes in order to replicate the undesired behavior you are facing?

    I am looking forward to your reply.

    Regards,
    Dess
    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.
  8.
  9. Patrick
    Patrick avatar
    8 posts
    Member since:
    Oct 2017

    Posted 06 Sep 2018 Link to this post

    Hello Dess,

    As I feared a simple mistake.

    After reviewing your code in VS, I finally realized the difference, I used

    this.radChartView2.ChartElement.LegendElement.StackElement.TextOrientation = Orientation.Horizontal;

     

    with TextOrientation instead of Orientation only.

    Sorry for overlooking that.

    Many thx, problem solved

  11. Zim
    Zim avatar
    7 posts
    Member since:
    May 2018

    Posted 20 Sep 2018 Link to this post

    hi i tried this as I'm aware of the ctrl+shift and red boxes for alignment purposes, but it doesn't display the legen horizontally.
  13. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr. avatar
    3637 posts

    Posted 21 Sep 2018 Link to this post

    Hello, Zim,  

    Please refer to the attached sample project in the reply from 04-Sep-2018. It demonstrates how to arrange the legend items horizontally:



    I hope this information helps. 

    Regards,
    Dess
    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.
  14.
Back to Top