Legend color issue

4 posts, 0 answers
  1. Faheem
    Faheem avatar
    17 posts
    Member since:
    Feb 2011

    Posted 03 Nov 2011 Link to this post

    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>
  2. Evgenia
    Admin
    Evgenia avatar
    1406 posts

    Posted 07 Nov 2011 Link to this post

    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
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  3. UI for WPF is Visual Studio 2017 Ready
  4. Arun Kumar
    Arun Kumar avatar
    60 posts
    Member since:
    Nov 2009

    Posted 11 Dec 2011 Link to this post

    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;
                        }
                    }
  5. Evgenia
    Admin
    Evgenia avatar
    1406 posts

    Posted 14 Dec 2011 Link to this post

    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
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
Back to Top