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

Binding Chart to Legend with CombineMode Stack

3 Answers 271 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Max
Top achievements
Rank 1
Iron
Max asked on 24 Nov 2017, 04:30 AM

Hi Guys,

I've got a very simple example I have been trying to get to work, specifically, I am binding a RadCartesianChart with a stacked barseries. However unfortunately I have been unable to get the RadLegend control to work with my example.

So my model looks like this.

public class DissectionMonthlySales
{
    public DateTime Date { get; set; }
    public string Name { get; set; }
    public decimal Total { get; set; }
    public Brush Color { get; private set; }
 
    public override string ToString()
    {
        return string.Format("{0} - {1:c}", this.Name, this.Total);
    }
}

 

and my chart xaml looks like this

<telerik:RadCartesianChart x:Name="SalesByDissectionsChart">
    <telerik:RadCartesianChart.Behaviors>
        <telerik:ChartTooltipBehavior Placement="Top" />
    </telerik:RadCartesianChart.Behaviors>
    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:DateTimeCategoricalAxis LabelFitMode="Rotate" LabelFormat="MMM-yyyy" />
    </telerik:RadCartesianChart.HorizontalAxis>
    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:LinearAxis
        LabelFormat="c0"
        Minimum="0"
        SmartLabelsMode="SmartStep" />
    </telerik:RadCartesianChart.VerticalAxis>
    <telerik:BarSeries
    x:Name="SalesByDissectionSeries"
    CombineMode="Stack"
    ValueBinding="Total"
    StackGroupKey="Name"
    CategoryBinding="Date"
    ItemsSource="{Binding}"
    ShowLabels="False">
 
        <telerik:BarSeries.TooltipTemplate>
            <DataTemplate>
                <Border Padding="4" BorderBrush="LightGray">
                    <Border.Background>
                        <SolidColorBrush Opacity="0.7" Color="SlateGray" />
                    </Border.Background>
                    <Border.BitmapEffect>
                        <DropShadowBitmapEffect />
                    </Border.BitmapEffect>
                    <TextBlock Foreground="White" Text="{Binding DataItem}" />
                </Border>
 
            </DataTemplate>
        </telerik:BarSeries.TooltipTemplate>
 
 
        <telerik:BarSeries.PointTemplate>
            <DataTemplate>
                <Rectangle Fill="{Binding DataItem.Color}" />
            </DataTemplate>
        </telerik:BarSeries.PointTemplate>
    </telerik:BarSeries>
</telerik:RadCartesianChart>

 

and my radlegend looks like this.

 

<telerik:RadLegend
x:Name="RadLegend"
Margin="6"
Items="{Binding LegendItems, ElementName=SalesByDissectionsChart}" />

 

Basically what I want to achieve is the ability to display the StackGroup items in the radlegend.

However no matter what I do Chart.LegendItems seems to contain zero elements and I consequently can't get it to display my stacked groups in the legend. 

Can anyone provide any guidance on what I might be doing wrong?

 

 

 

3 Answers, 1 is accepted

Sort by
0
Martin Ivanov
Telerik team
answered on 28 Nov 2017, 12:15 PM
Hello Max,

In order to populate the LegendSettings collection of the chart you will need to set the LegendSettings property of the series. Otherwise, the collection will be empty and the legend won't display anything.
<telerik:BarSeries.LegendSettings>
    <telerik:SeriesLegendSettings Title="Bar Series" />
</telerik:BarSeries.LegendSettings>

I hope this helps.

Regards,
Martin Ivanov
Progress Telerik
Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
0
Max
Top achievements
Rank 1
Iron
answered on 28 Nov 2017, 12:29 PM

I think I may not have explained myself properly.

In my case the RadLegendSeries needs to dynamically populate the legend based on the values inside my DissectionMonthlySales collection utilising the Name property.

I am able to do this programmatically by directly populating the RadLegend as such:

 

 RadLegend.Items = new LegendItemCollection();

 

but obviously I would prefer a binding approach to this if one is available?

 

0
Martin Ivanov
Telerik team
answered on 28 Nov 2017, 12:48 PM
Hello Max,

RadLegend can work only with LegendItemCollection which is populated with LegendItems. Currently, it doesn't support data binding. However, you can achieve your requirement by using a an IValueConverter. Basically, you can bind your collection with business items using the converter to convert it to LegendItemCollection. You can assign the business object (DissectionMonthlySales) to the Presenter property of the corresponding LegendItem from where you can reach it. To change the appearance of the legend item control you can set the ItemTemplate property of the RadLegend control.

Regards,
Martin Ivanov
Progress Telerik
Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
Tags
Chart
Asked by
Max
Top achievements
Rank 1
Iron
Answers by
Martin Ivanov
Telerik team
Max
Top achievements
Rank 1
Iron
Share this question
or