Alignment of Chart Legend

[Benjamin]

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

 

[Benjamin]

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>

[Benjamin]

just to add, is it possible to change the icon from square to circle?

[Benjamin]

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. 

[Lance | Senior Manager Technical Support]

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