Legend color issue

[Faheem]

Hi,

I have a weird issue with chart... the legend colors didn't match the line color on chart, Please check the attached picture

<telerik:RadChart DataContext="{Binding}" telerik:Theming.Theme="Office_Blue" HorizontalAlignment="Left"  Loaded="RadChart1_Loaded" Name="radChart1" VerticalAlignment="Top"  >

                <telerik:RadChart.DefaultView>
                    <telerik:ChartDefaultView  ChartLegendPosition="Top">
                        <!--<telerik:ChartDefaultView.ChartTitle>
                        <telerik:ChartTitle>CDC growth chart</telerik:ChartTitle>
                    </telerik:ChartDefaultView.ChartTitle>-->
                        <telerik:ChartDefaultView.ChartLegend>
                            <telerik:ChartLegend x:Name="PrimaryLegend" Header="Click on percentile to hide/show:" LegendItemMarkerShape="Square" LegendItemStyle="{StaticResource CustomLegendItemStyle}"  />
                        </telerik:ChartDefaultView.ChartLegend>
                        <telerik:ChartDefaultView.ChartArea >
                            <telerik:ChartArea EnableAnimations="False" Padding="5,10,20,5" LabelFormatBehavior="None" LegendName="PrimaryLegend" FontSize="10" >
                                <telerik:ChartArea.PaletteBrushes>
                                    <SolidColorBrush Color="Red" />
                                    <SolidColorBrush Color="LightGray" />
                                    <SolidColorBrush Color="LightGray" />
                                    <SolidColorBrush Color="LightGray" />
                                    <SolidColorBrush Color="LightGray" />
                                    <SolidColorBrush Color="LightGray" />
                                    <SolidColorBrush Color="LightGray" />
                                    <SolidColorBrush Color="LightGray" />
                                    <SolidColorBrush Color="LightGray" />
                                    <SolidColorBrush Color="LightGray" />
                                    <SolidColorBrush Color="LightGray" />
                                    <SolidColorBrush Color="LightGray" />
                                    <SolidColorBrush Color="LightGray" />
                                    <SolidColorBrush Color="LightGray" />
                                    <SolidColorBrush Color="LightGray" />
                                    <SolidColorBrush Color="LightGray" />

                                </telerik:ChartArea.PaletteBrushes>
                                <telerik:ChartArea.AxisY>
                                    <telerik:AxisY ExtendDirection="None"  />
                                </telerik:ChartArea.AxisY>
                            </telerik:ChartArea>
                        </telerik:ChartDefaultView.ChartArea>
                    </telerik:ChartDefaultView>
                </telerik:RadChart.DefaultView>
                <telerik:RadChart.SeriesMappings>
.............................................................
<telerik:RadChart>

[Evgenia]

Hi Faheem,

It is hard for us to determine what may cause this unwanted behaviour without your source code. Could you please send us your runnable attached project so that we will be able to inspect it locally and get back to you with our findings/suggestions based on the code?

Greetings,
Evgenia
the Telerik team

[Arun Kumar]

I am having the same issue. I am creating brushes in viewmodel.
Here is the XAML:

<telerik:RadChart x:Name="pcUnitSummary"
                                              PaletteBrushesUseSolidColors="True"
                                              PaletteBrushes="{Binding Path=UnitColorPalette}"
                                              ItemsSource="{Binding Path=LstUnitSummaryData}"
                                              SeriesMappings="{Binding Path=PCUnitSeriesMappings}">

                                <telerik:RadChart.DefaultView>
                                    <telerik:ChartDefaultView>

                                        <telerik:ChartDefaultView.ChartArea>
                                            <telerik:ChartArea LegendName="clUnit" EnableAnimations="False"
                                                               NoDataString="No Data Available" />
                                        </telerik:ChartDefaultView.ChartArea>

                                        <telerik:ChartDefaultView.ChartLegend>
                                            <telerik:ChartLegend x:Name="clUnit" Header="" />
                                        </telerik:ChartDefaultView.ChartLegend>

                                    </telerik:ChartDefaultView>
                                </telerik:RadChart.DefaultView>

                            </telerik:RadChart>

Here is the viewmodel:

        private void DisplayUnitSummaryPie()
        {
            PieSeriesDefinition pie = new PieSeriesDefinition();
            pie.StartAngle = -240;
            pie.ItemLabelFormat = "#Y";


            pie.LabelSettings = new RadialLabelSettings
            {
                LabelOffset = 1.2
            };


            pie.InteractivitySettings = new InteractivitySettings
            {
                SelectionMode = ChartSelectionMode.Single,
                SelectionScope = InteractivityScope.Item,
                HoverScope = InteractivityScope.None
            };


            this.PCUnitSeriesMappings.Add(this.ConfigureUnitPieMapping(pie));
            //this.LstUnitSummaryData = this.CreateUnitSummaryData();
        }




        private SeriesMappingCollection _pcUnitSeriesMappings;
        public SeriesMappingCollection PCUnitSeriesMappings
        {
            get
            {
                return this._pcUnitSeriesMappings;
            }
            set
            {
                if (this._pcUnitSeriesMappings != value)
                {
                    this._pcUnitSeriesMappings = value;
                    this.OnPropertyChanged("PCUnitSeriesMappings");
                }
            }
        }




        private SeriesMapping ConfigureUnitPieMapping(SeriesDefinition definition)
        {
            SeriesMapping mapping = new SeriesMapping();
            mapping.SeriesDefinition = definition;
            mapping.ItemMappings.Add(new ItemMapping("Description", DataPointMember.LegendLabel));
            mapping.ItemMappings.Add(new ItemMapping("Count", DataPointMember.YValue));
            return mapping;
        }

        private BrushCollection _UnitColorPalette;
        public BrushCollection UnitColorPalette
        {
            get { return this._UnitColorPalette; }
            set
            {
                if (this._UnitColorPalette != value)
                {
                    this._UnitColorPalette = value;
                    this.OnPropertyChanged("UnitColorPalette");
                }
            }
        }


foreach (Summary s in LstUnitSummaryData)
                {
                    switch (s.Description.ToUpper())
                    {
                        case "1":
                            paletteColors.Add(new SolidColorBrush(this.GetColorFromHexString("#FF00B366")));
                            break;
                        case "2":
                            paletteColors.Add(new SolidColorBrush(this.GetColorFromHexString("#FFFEE680")));
                            break;
                        case "3":
                            paletteColors.Add(new SolidColorBrush(this.GetColorFromHexString("#FFB2B300")));
                            break;
                        case "4":
                            paletteColors.Add(new SolidColorBrush(this.GetColorFromHexString("#FFFE9980")));
                            break;
                        case "5":
                            paletteColors.Add(new SolidColorBrush(this.GetColorFromHexString("#FF4B4B4B")));
                            break;
                        default:
                            paletteColors.Add(new SolidColorBrush(this.GetColorFromHexString("#FF00CC00")));
                            break;
                    }
                }

[Evgenia]

Hi Arun,

The palette brushes functionality exposes a way to set custom colors for RadChart, but it does not keep the relation between a color and series. That is why when you don't have data for one of the series, the colors are changed /seems like the chart palette brushes are reset/.

However, there are several possible options to control this behavior, which depend on your scenario.

1. Keep using the PaletteBrushes collection for the control  and when the underlying data is changed, you can add/remove/alter the palette brushes accordingly, in order to preserve the logical correlation between some serie and its corresponding Color.

2. Directly alter the visual attribites of a series mapping:

<telerik:RadChart.SeriesMappings>
               <chart:SeriesMapping>
                   <chart:SeriesMapping.SeriesDefinition>
                       <chart:AreaSeriesDefinition NullValueBehavior="{Binding NulValueBehavior}" ShowItemToolTips="True">
                           <chart:AreaSeriesDefinition.Appearance>
                               <chart:SeriesAppearanceSettings Foreground="Green" Stroke="Green">
                               </chart:SeriesAppearanceSettings>
                           </chart:AreaSeriesDefinition.Appearance>
                       </chart:AreaSeriesDefinition>
                   </chart:SeriesMapping.SeriesDefinition>
                   <chart:ItemMapping FieldName="Value" DataPointMember="YValue"></chart:ItemMapping>
                   <chart:ItemMapping FieldName="Date" DataPointMember="XValue"></chart:ItemMapping>
               </chart:SeriesMapping>
           </telerik:RadChart.SeriesMappings>

3. Check this example also. There you can see how all colors are preserved because when a series is not visible, it is actually hidden.

Please try some of these approaches according to your scenario and let us know how it goes.

Regards,
Evgenia
the Telerik team