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

[Solved] Customize colors for Charts

4 Answers 181 Views

Chart

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

This question is locked. New answers and comments are not allowed.

Vinay asked on 01 Jul 2011, 12:41 PM

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

.

4 Answers, 1 is accepted

Accepted

answered on 04 Jul 2011, 03:07 PM

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

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 Public Issue Tracking system and vote to affect the priority of the items

answered on 22 Jul 2011, 08:53 PM

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.