[Solved] PieChart - labels in stackpanel with matching colors?

[Andreas]

Hello,

Wow, that's a terrible title... However, what I'm trying to ask is whether it's possible to achieve this?
([img] tags didn't work)

http://img.ctrlv.in/50c7ae1a44f72.PNG

[Giuseppe]

Hello Andreas,

You can use the RadLegendControl to achieve the desired functionality like this:

<Page
    x:Class="App2.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App2"
    xmlns:telerik="using:Telerik.UI.Xaml.Controls.Chart"
    xmlns:primitives="using:Telerik.UI.Xaml.Controls.Primitives"
    xmlns:charting="using:Telerik.Charting"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <telerik:RadPieChart x:Name="RadChart1" PaletteName="DefaultDark">
            <telerik:DoughnutSeries>
                <telerik:DoughnutSeries.DataPoints>
                    <charting:PieDataPoint Value="10" Label="Customer" />
                    <charting:PieDataPoint Value="20" Label="Partner" />
                    <charting:PieDataPoint Value="30" Label="SMTP" />
                </telerik:DoughnutSeries.DataPoints>
            </telerik:DoughnutSeries>
        </telerik:RadPieChart>

        <primitives:RadLegendControl Grid.Column="1" LegendProvider="{Binding ElementName=RadChart1}" />

    </Grid>
</Page>

You can find more information on RadLegendControl here.

Hope this helps.


Regards,
Giuseppe
the Telerik team

[Andreas]

Thanks a bunch, Giuseppe.

How could I limit the amount of legends shown vertically, and force the second row to be set like this example?
(I assume that's common XAML, but for some reason none of my attempts has worked..)

Label1     Label2
Label3     Label4
Label5     Label6

Thanks!

EDIT:
Well of course, once you've asked the question, you solve it yourself.. Thanks anyway! :)

[Ivaylo Gergov]

Hi Andreas,

Thank you for getting back to us.

In order to achieve this result you can use the RadLegendControl.ItemsPanel property and change its ItemsPanelTemplate. By default it is a WrapGrid with MaximumRowsOrColumns="3" and Orientation="Vertical" so the LegendItems are three per column. In your case you need two LegendItems per row so you need to set MaximumRowsOrColumns="2" and Orientation="Horizontal". Here's an example:

<primitives:RadLegendControl.ItemsPanel>
    <ItemsPanelTemplate>
        <WrapGrid MaximumRowsOrColumns="2" Orientation="Horizontal"/>
    </ItemsPanelTemplate>
</primitives:RadLegendControl.ItemsPanel>

I hope this helps. Let me know if I can assist you any further.

Greetings,
Ivaylo Gergov
the Telerik team