Alignment of Chart Legend

5 posts, 0 answers
  1. Benjamin
    Benjamin avatar
    11 posts
    Member since:
    May 2018

    Posted 29 Aug Link to this post

    How do i center align the Chart Legend and box up the legend.

     

  2. Benjamin
    Benjamin avatar
    11 posts
    Member since:
    May 2018

    Posted 29 Aug Link to this post

    Tried putting the legend into RadBorder, but the legend is not showing out

    Code:

    <telerikPrimitives:RadBorder x:Name="border" BorderColor="Black">
        <telerikChart:RadLegend  Margin="0, 10, 0, 0" LegendProvider="{x:Reference Chart1}" Orientation="Horizontal">
            <telerikChart:RadLegend.LegendItemFontSize>
                <OnPlatform x:TypeArguments="x:Double">
                    <On Platform="iOS">10</On>
                </OnPlatform>
            </telerikChart:RadLegend.LegendItemFontSize>
            <telerikChart:RadLegend.LegendItemIconSize>
                <Size>
                    <Size.Width>10</Size.Width>
                    <Size.Height>20</Size.Height>
                </Size>
            </telerikChart:RadLegend.LegendItemIconSize>
        </telerikChart:RadLegend>
    </telerikPrimitives:RadBorder>
  3. Benjamin
    Benjamin avatar
    11 posts
    Member since:
    May 2018

    Posted 29 Aug in reply to Benjamin Link to this post

    just to add, is it possible to change the icon from square to circle?
  4. Benjamin
    Benjamin avatar
    11 posts
    Member since:
    May 2018

    Posted 29 Aug Link to this post

    it also seems that the legend will only be shown when i use Grid Layout, using any other Xamarin Forms layout will caused the legend to be not showing. 
  5. Lance | Team Lead - US DevTools Support
    Admin
    Lance | Team Lead - US DevTools Support avatar
    1048 posts

    Posted 29 Aug Link to this post

    Hi Benjamin,

    The reason you're not seeing the legend in some circumstances is because it is essentially a virtualized items control. You will need to make sure the parent element has layout properties and size to let the legend render. Take a look at the Controls are not Appearing troubleshooting article.

    In your example with the RadBorder, I can't tell what the parent is. However, if that code is used and alignment pushes it to a side, the Legend will not" push out" its parent to get more room and seem to be invisible.

    To resolve this, give the RadBorder some explicit horizontal dimensions (because the legend orientation is horizontal). To be specific, without minimum dimensions, setting the horizontal options to Center, Start or End will squeeze the control to 0 width. Setting the VertialOptions to start center or end will squeeze to 0 height.

    The best way to diagnose what's happening is to use a test BackgroundColor:

    <primitives:RadBorder  
        BorderColor="Black"
        BorderThickness="1"
        BackgroundColor="Red" ...>

    This way you can get a better understanding of what's happening the elements.

    Getting Desired Results

    Here's a screenshot what the result is when you define dimensions to override the orientation pressure:

    Here's the code I used:

    <ContentPage...>
        <Grid>
            ...
            <primitives:RadBorder x:Name="border"
                                  BorderColor="Black"
                                  BorderThickness="1"
                                  WidthRequest="200"
                                  HeightRequest="25"
                                  HorizontalOptions="Center"
                                  VerticalOptions="Start"
                                  Padding="2"
                                  Margin="0, 10, 0, 0">
                <chart:RadLegend LegendProvider="{x:Reference Chart1}"
                                 Orientation="Horizontal">
                    <chart:RadLegend.LegendItemFontSize>
                        <OnPlatform x:TypeArguments="x:Double">
                            <On Platform="iOS">10</On>
                        </OnPlatform>
                    </chart:RadLegend.LegendItemFontSize>
                    <chart:RadLegend.LegendItemIconSize>
                        <Size>
                            <Size.Width>10</Size.Width>
                            <Size.Height>20</Size.Height>
                        </Size>
                    </chart:RadLegend.LegendItemIconSize>
                </chart:RadLegend>
            </primitives:RadBorder>
        </Grid>
    </ContentPage>

    Customizing Icon Visuals

    As far as using custom shapes for the RadLegend, there is no Xamarin.Forms way to do this. Although you can pass some things like font size and color, this is different than using a Xamarin.Forms view because the control is a natively drawn component.

    You could try using a Custom Renderer or a Xamarin.Forms Platform Effect on the legend, to get access to the native component and try in there. On Android it's a RadLegendView, on iOS you'd get the TKChartLegendView and for UWP it's the RadLegendControl (we have an example of an Ellipse template because this is also XAML)

    Feature Request

    Ultimately, I recommend opening a Feature Request for this so that the development team can expose a property on the Xamarin.Forms control that will let you set the shape of the icon like you can on the native platform. This request is going to need native platform support.

    For example, iOS you can choose from a set of pre-defined shapes:

    Further Assistance

    If you have any trouble implementing a Custom Renderer, please open a Support Ticket so that you can get assistance form the developers on that native team. They'll be able to assist you further with the native API. If you're not able to open a ticket right now, you can try reviewing the native demos in your installation's Examples folder.

    Regards,
    Lance | Technical Support Engineer, Principal
    Progress Telerik

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top