Customize colors for Charts

5 posts, 1 answers
  1. Vinay
    Vinay avatar
    36 posts
    Member since:
    Mar 2010

    Posted 01 Jul 2011 Link to this post

    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
    .
  2. Answer
    Sia
    Admin
    Sia avatar
    756 posts

    Posted 04 Jul 2011 Link to this post

    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
  3. Brian
    Brian avatar
    58 posts
    Member since:
    Jul 2011

    Posted 22 Jul 2011 Link to this post

    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.
  4. Sia
    Admin
    Sia avatar
    756 posts

    Posted 25 Jul 2011 Link to this post

    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

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  5. Sia
    Admin
    Sia avatar
    756 posts

    Posted 25 Jul 2011 Link to this post

    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

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

Back to Top