This is a migrated thread and some comments may be shown as answers.

Alignment of Chart Legend

4 Answers 35 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Benjamin
Top achievements
Rank 1
Veteran
Benjamin asked on 29 Aug 2019, 06:57 AM

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

 

4 Answers, 1 is accepted

Sort by
0
Benjamin
Top achievements
Rank 1
Veteran
answered on 29 Aug 2019, 07:02 AM

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>
0
Benjamin
Top achievements
Rank 1
Veteran
answered on 29 Aug 2019, 07:24 AM
just to add, is it possible to change the icon from square to circle?
0
Benjamin
Top achievements
Rank 1
Veteran
answered on 29 Aug 2019, 09:56 AM
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. 
0
Lance | Manager Technical Support
Telerik team
answered on 29 Aug 2019, 07:37 PM

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
Tags
Chart
Asked by
Benjamin
Top achievements
Rank 1
Veteran
Answers by
Benjamin
Top achievements
Rank 1
Veteran
Lance | Manager Technical Support
Telerik team
Share this question
or