Customize colors for Charts

[Vinay]

Hi,
I have Implimented Pie Chart in my application.
I wanted to change the colors which are applied by default to the chart?
I tried adding <telerik:ChartArea.PaletteBrushes> , The Pie chart displayed as per the colors specified,but the colors was not being applied to the Legends, nor the Legends were being displayed.
Below is my code,

<telerik:RadChart x:Name="pieChartMonthtoDate" BorderBrush="Transparent" Background="Transparent" Grid.Column="0" Width="450" Height="300">
                        <telerik:RadChart.SeriesMappings>
                            <telerik:SeriesMapping>
                                <telerik:SeriesMapping.SeriesDefinition>
                                    <telerik:PieSeriesDefinition ItemToolTipFormat="#%{P2}" ShowItemToolTips="True">
                                        <telerik:PieSeriesDefinition.InteractivitySettings>
                                            <telerik:InteractivitySettings HoverScope="Item" SelectionScope="Item" SelectionMode="Single" />
                                        </telerik:PieSeriesDefinition.InteractivitySettings>
                                    </telerik:PieSeriesDefinition>
                                </telerik:SeriesMapping.SeriesDefinition>
                                <telerik:SeriesMapping.ItemMappings>
                                    <telerik:ItemMapping FieldName="Count" DataPointMember="YValue" />
                                    <telerik:ItemMapping FieldName="ReportType" DataPointMember="LegendLabel" />
                                </telerik:SeriesMapping.ItemMappings>
                            </telerik:SeriesMapping>
                        </telerik:RadChart.SeriesMappings>
                    </telerik:RadChart>

And here is the code behind,

Private Sub LoadReportActivityMonthCompleted(ByVal invoke As LoadOperation(Of AuditReportsViewedEntities))
        Try
            pieChartMonthtoDate.DefaultView.ChartLegend.Style = Me.CustomLegendStyle
            pieChartMonthtoDate.DefaultView.ChartLegend.LegendItemStyle = Me.CustomLegendItemStyle
            pieChartMonthtoDate.ItemsSource = invoke.Entities
        Catch ex As Exception

        End Try
    End Sub

.

[Sia]

Hello Vinay Uthappa,

Using custom palette brushes is the right way to achieve this.

You just need to define a legend in your XAML and make the ChartArea point to the same legend through the exposed LegendName property as shown below:

<telerik:RadChart.DefaultView>
       <telerik:ChartDefaultView>
                 <telerik:ChartDefaultView.ChartArea>
                            <telerik:ChartArea x:Name="ChartArea2"  LegendName="legend2" />
                  </telerik:ChartDefaultView.ChartArea>
                   <telerik:ChartDefaultView.ChartLegend>
                            <telerik:ChartLegend Name="legend2" />
                  </telerik:ChartDefaultView.ChartLegend>
      </telerik:ChartDefaultView>
</telerik:RadChart.DefaultView>

Kind regards,
Sia
the Telerik team

[Brian]

I am trying to do the same thing with a line chart and the posted solution is not working.  The lines are drawn the colors from my palette brushes, but the legend items do not match correctly.  Here is my RadChart.DefaultView section:

<telerik:RadChart.DefaultView>
                <telerik:ChartDefaultView>
                    <telerik:ChartDefaultView.ChartArea>
                        <telerik:ChartArea x:Name="ChartArea1" LegendName="ChartLegend1">
                            <telerik:ChartArea.AxisX>
                                <telerik:AxisX IsDateTime="True" DefaultLabelFormat="MMM yyyy">
                                    <telerik:AxisX.AxisStyles>
                                        <telerik:AxisStyles ItemLabelStyle="{StaticResource RairTextStyleBase}"/>
                                    </telerik:AxisX.AxisStyles>
                                </telerik:AxisX>
                            </telerik:ChartArea.AxisX>
                            <telerik:ChartArea.AxisY>
                                <telerik:AxisY DefaultLabelFormat="0.0%">
                                    <telerik:AxisY.AxisStyles>
                                        <telerik:AxisStyles ItemLabelStyle="{StaticResource RairTextStyleBase}"/>
                                    </telerik:AxisY.AxisStyles>
                                </telerik:AxisY>
                            </telerik:ChartArea.AxisY>
                            <telerik:ChartArea.PaletteBrushes>
                                <SolidColorBrush Color="{StaticResource Excess11HoursColor}"/>
                                <SolidColorBrush Color="{StaticResource Excess14HoursColor}"/>
                                <SolidColorBrush Color="{StaticResource Excess70Hr8DayColor}"/>
                                <SolidColorBrush Color="{StaticResource MissingLogsColor}"/>
                                <SolidColorBrush Color="{StaticResource IncompleteLogsColor}"/>
                                <SolidColorBrush Color="{StaticResource InaccurateLogsColor}"/>
                                <SolidColorBrush Color="{StaticResource InaccurateGpsLogsColor}"/>
                            </telerik:ChartArea.PaletteBrushes>
                        </telerik:ChartArea>
                    </telerik:ChartDefaultView.ChartArea>
                    <telerik:ChartDefaultView.ChartLegend>
                        <telerik:ChartLegend x:Name="ChartLegend1" />
                    </telerik:ChartDefaultView.ChartLegend>
                </telerik:ChartDefaultView>
            </telerik:RadChart.DefaultView>

Is there something else that has to be set?

Edit: The posted solution works if I set the PaletteBrushes at the RadChart level, but not if they are set at the ChartArea level.

[Sia]

Hi Brian,

Please try to add your custom palette to RadChart in spite of adding them to the chart area and let me know whether this solves your problem.

All the best,
Sia
the Telerik team

[Sia]

Hello Brian,

I have missed your note at the bottom. As I said, in order to get them applied to the chart legend, you need to add them to your RadChart.

I hope this helps.

All the best,
Sia
the Telerik team