Multiple rows in horizontal legend

6 posts, 0 answers
  1. Ladislav
    Ladislav avatar
    5 posts
    Member since:
    Jun 2013

    Posted 31 Oct 2014 Link to this post

    Hello,
    is there any way to align legend items in two rows, if chart area if not wide enough to hold the whole legend? (see attachment

    Thanks.
  2. Adrian
    Admin
    Adrian avatar
    167 posts

    Posted 31 Oct 2014 Link to this post

    Hello Ladislav,

    Thank you for contacting us.

    Currently the legend items can be aligned vertically or horizontally in the legend view setting the orientation property like in the following code snippet:
    chart.legend.container.stack.orientation = TKStackLayoutOrientationHorizontal;

    Customising how legend items are aligned inside the legend view seems to be a good feature and we will consider implementing such functionality. I logged it in our feedback portal. Feel free to comment/vote for it.
    I also updated your Telerik points for this suggestion.

    I hope this helps. Do not hesitate to contact us in case you need any assistance.

    Regards,
    Adrian
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. DevCraft banner
  4. Ladislav
    Ladislav avatar
    5 posts
    Member since:
    Jun 2013

    Posted 17 Dec 2014 in reply to Adrian Link to this post

    Hello,
    I notice some legend customization improvement in latest release of UI for iOS. But there is still strange behavior of legend items (see attachment). I would prefer, if legend items were in two rows in case they are too wide. How can I do that?

    Code snippet (swift):
            
    chartView.legend().hidden = false
    chartView.legend().style.offset = UIOffset(horizontal: 0, vertical: -45)
    chartView.legend().style.offsetOrigin = TKChartLegendOffsetOrigin.BottomRight
    chartView.legend().container.stack.orientation = TKStackLayoutOrientation.Horizontal
    chartView.legend().container.stack.itemSpacing = 20

    Thank you!
  5. Adrian
    Admin
    Adrian avatar
    167 posts

    Posted 17 Dec 2014 Link to this post

    Hi Ladislav,

    In order to wrap the legend items text in 2 lines, you should implement chart:updateLegendItem item:forSeries series:atIndex index: method of TKChartDelegate and set the numberOfLines property of the item's label. Please consider the code snippet below:
    func chart(chart: TKChart!, updateLegendItem item: TKChartLegendItem!, forSeries series: TKChartSeries!, atIndex index: UInt) {
        item.label.numberOfLines = 2
    }

    I hope this helps. I will be glad to assist if you have further questions.

    Regards,
    Adrian
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Allen
    Allen avatar
    4 posts
    Member since:
    Oct 2014

    Posted 23 Dec 2014 Link to this post

    I am also having a problem with the new legend. It is great that it is now scrollable, but I add and remove series from my line chart, but the legend only ever shows one item, I have to scroll to see the others. How can I tell the legend to use the full width of the chart and not just be the width of one item ?

    I initialise the legend using this code:

            chart.legend().hidden = false
            chart.legend().style.position = TKChartLegendPosition.Top
            chart.legend().container.stack.orientation = TKStackLayoutOrientation.Horizontal

    Thanks

    Allen






  7. Jack
    Admin
    Jack avatar
    2335 posts

    Posted 23 Dec 2014 Link to this post

    Hi Allen,

    You can do this by setting the preferredSize property of the legend container. By default it is zero and this indicates that legend size will be calculated automatically. Consider the sample below:
    chart.legend().hidden = false
    chart.legend().style.position = TKChartLegendPosition.Top
    chart.legend().container.stack.orientation = TKStackLayoutOrientation.Horizontal
    chart.legend().container.preferredSize = CGSizeMake(chart.frame.size.width, 0)

    Regards,
    Jack
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
DevCraft banner