[Solved] ChartView Legend Colors

[Marcel]

Hello,

I am using a ChartView RadCartesianChart with a stacked BarSeries and I have a legend defined. My user has asked for custom colors for each of the bars (series). I have managed to set the color of the bars, but the legend retains the original palette colors. How can I set the Legend colors to match the bar colors? Thank you

<Grid>
    <telerik:RadLegend Grid.Column="1" Margin="0 0 0 0"
        Items="{Binding LegendItems, ElementName=CalendarSummaryLargeChart}"
        HorizontalAlignment="Right" VerticalAlignment="Top"/>
    <Grid>
        <Grid.ColumnDefinitions>
            <!--the second column is for the legend-->
            <ColumnDefinition Width="9*" MinWidth="0" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Column="0" Margin="0 0 0 0">
            <telerik:RadCartesianChart
            x:Name="CalendarSummaryLargeChart" Palette="Arctic" MinWidth="620" MinHeight="500" >
                <telerik:RadCartesianChart.HorizontalAxis>
                    <telerik:CategoricalAxis>
                    </telerik:CategoricalAxis>
                </telerik:RadCartesianChart.HorizontalAxis>
                <telerik:RadCartesianChart.VerticalAxis>
                    <telerik:LinearAxis></telerik:LinearAxis>
                </telerik:RadCartesianChart.VerticalAxis>
                <telerik:BarSeries
                x:Name="CalendarSummaryGlobalLargeSeries"
                ShowLabels="True"
                ClipToPlotArea="False"
                CombineMode="Stack">
                    <telerik:BarSeries.LegendSettings>
                        <telerik:SeriesLegendSettings Title="Global" />
                    </telerik:BarSeries.LegendSettings>
                    <telerik:BarSeries.PointTemplate>
                        <DataTemplate>
                            <Rectangle Fill="#404040" Stretch="Fill" />
                        </DataTemplate>
                    </telerik:BarSeries.PointTemplate>
                </telerik:BarSeries>
                <telerik:BarSeries
                x:Name="CalendarSummaryResourceLargeSeries"
                ShowLabels="True"
                ClipToPlotArea="False"
                CombineMode="Stack">
                    <telerik:BarSeries.PointTemplate>
                        <DataTemplate>
                            <Rectangle Fill="Gold" Stretch="Fill" />
                        </DataTemplate>
                    </telerik:BarSeries.PointTemplate>
                    <telerik:BarSeries.LegendSettings>
                        <telerik:SeriesLegendSettings Title="Resource" />
                    </telerik:BarSeries.LegendSettings>
                </telerik:BarSeries>
                <telerik:RadCartesianChart.Behaviors >
                    <telerik:ChartTooltipBehavior
                        Placement="Top" VerticalOffset="0" HorizontalOffset="-10" />
                </telerik:RadCartesianChart.Behaviors >

[Petar Kirov]

Hi Marcel,

Instead of defining different PointTemplates for each chart series, you can define your own ChartPalette. Here is an example: 

<UserControl.Resources>
    <telerik:ChartPalette x:Key="customPalette">
        <telerik:ChartPalette.GlobalEntries>
            <telerik:PaletteEntry Fill="#404040"/>
            <telerik:PaletteEntry Fill="Gold"/>
            <!--Put palette entries for other series here-->
        </telerik:ChartPalette.GlobalEntries>
    </telerik:ChartPalette>
</UserControl.Resources>

<Grid>
    <telerik:RadLegend Grid.Column="1" Margin="0 0 0 0"
       Items="{Binding LegendItems, ElementName=CalendarSummaryLargeChart}"
       HorizontalAlignment="Right" VerticalAlignment="Top"/>
    <Grid>
        <Grid.ColumnDefinitions>
            <!--the second column is for the legend-->
            <ColumnDefinition Width="9*" MinWidth="0" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Column="0" Margin="0 0 0 0">
            <telerik:RadCartesianChart x:Name="CalendarSummaryLargeChart"
                    Palette="{StaticResource customPalette}"
                    MinWidth="620" MinHeight="500">

I hope this helps.

All the best,
Petar Kirov
the Telerik team

[Praveen]

Hi Petar,
On top of this,I 've a question.

I decide my bar series colors using converter and it is showing perfectly.However,the corresponding color is not applied to legend.
Can you please let me know how can I do this?
Below is my code.

<telerik:BarSeries ValueBinding="UmAfterRiskPerc" CategoryBinding="ProductGroup">
<telerik:BarSeries.LegendSettings>
<telerik:SeriesLegendSettings Title="Proposal" />
</telerik:BarSeries.LegendSettings>
<telerik:BarSeries.PointTemplate>
<DataTemplate>
<Rectangle>
<Rectangle.Fill>
<MultiBinding Converter="{StaticResource ThresholdConverter}"
ConverterParameter="{x:Static settings:ThresholdSettingConverterParameter.UMARPERCENT}">
<Binding Path="DataItem.UmAfterRiskPerc" />
<Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}" Path="DataContext.ThresholdMeasurementManager" />
</MultiBinding>
</Rectangle.Fill>
</Rectangle>
</DataTemplate>
</telerik:BarSeries.PointTemplate>
</telerik:BarSeries>

[Martin Ivanov]

Hello Macel,

By default the RadCartesianChart uses the DefaultVisuals. Those are the default elements used by the chart to visually represent its data. When you define a PointTemplate you can put anything in it and the chart doesn't know from where exactly to get the colors for its legend. This is the reason behind the issue.

However if you want to set only the color of the series you can do it in the DefaultVisualStyle. This way the chart will use its DefaultVisual element for the BarSeries and it will know from where to get the colors for the legend.

<telerik:BarSeries ValueBinding="Value" CategoryBinding="Category" ItemsSource="{Binding Items}">
    <telerik:BarSeries.LegendSettings>
        <telerik:SeriesLegendSettings Title="Proposal" />
    </telerik:BarSeries.LegendSettings>
    <telerik:BarSeries.DefaultVisualStyle>
        <Style TargetType="Border">
            <Setter Property="Background" Value="Red" />
        </Style>
    </telerik:BarSeries.DefaultVisualStyle>
</telerik:BarSeries>

Another approach, as was mentioned earlier, is to use a custom Palette.

Regards,
Martin
Telerik