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

Assign colors to the slices of the pie chart

5 Answers 566 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Sampada
Top achievements
Rank 1
Sampada asked on 30 Jul 2013, 12:52 PM
Hi,

I am creating pie chart dynamically.
I wanted to assign colors to the slices of the pie chart. 
I have reviewed the http://www.telerik.com/help/silverlight/radchartview-populating-with-data-binding-the-color-of-series-items.html
link.
<Style x:Key="PieSliceStyle" TargetType="Path">
    <Setter Property="Fill" Value="{Binding DataItem.Brush}" />
</Style
<telerik:RadPieChart x:Name="chart">
    <telerik:PieSeries DefaultSliceStyle="{StaticResource PieSliceStyle}" 
                        ValueBinding="Value"
                        ItemsSource="{Binding}"/>
</telerik:RadPieChart>
 But I am not able to figure it out how to write this via code for dynamically created pie chart.

Could you please provide the demo project for this.

Thanks 
Sampada

5 Answers, 1 is accepted

Sort by
0
Evgenia
Telerik team
answered on 02 Aug 2013, 07:59 AM
Hi Sampada,

 I'm unsure why the approach used in the topic is not suitable for your scenario. Could you send more information on what are details around your requirement and more specially the dynamically created pie chart.

Regards,
Evgenia
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
0
Sampada
Top achievements
Rank 1
answered on 02 Aug 2013, 09:57 AM
Here is my code where I am creating the chart dynamically.
How can I assign color to the pie chart slice.

//Class file
 public class Progress
    {
        private int value;
        private string progress;
 
        public Progress()
        {
        }
 
        public int Value
        {
            get
            {
                return value;
            }
            set
            {
                this.value = value;
            }
        }
 
        public string ProgressStatus
        {
            get
            {
                return progress;
            }
            set
            {
                progress = value;
            }
        }
  
 
    }
 
//Code to generate Pie chart dynamically
 
 RadChart chart = new RadChart();
            List<Progress> b = new List<Progress>();
            b = e.Result.ToList();
            chart.DefaultView.ChartArea.AxisX.Title ="";
            chart.DefaultView.ChartArea.EnableAnimations = false;
            chart.DefaultView.ChartTitle.Content = "Test";
            chart.DefaultView.ChartTitle.FontFamily = new System.Windows.Media.FontFamily("Calibri");
            chart.DefaultView.ChartTitle.FontWeight = System.Windows.FontWeights.Bold;
            chart.DefaultView.ChartTitle.FontSize = 15;
            //Style sPie = new Style();
            //Setter s=new Setter();
            //s.Property = System.Windows.Setter.Equals;
            //sPie.Setters.Add(s);
            chart.DefaultView.ChartArea.NoDataString = "No data to display...";
            SeriesMapping seriesMapping = new SeriesMapping();
             
            seriesMapping.SeriesDefinition = new PieSeriesDefinition();
            seriesMapping.SeriesDefinition.InteractivitySettings.HoverScope = InteractivityScope.Item;
            seriesMapping.SeriesDefinition.InteractivitySettings.SelectionMode = ChartSelectionMode.Single;
            seriesMapping.SeriesDefinition.ShowItemLabels = true;
           // chart.ItemDataBound += new EventHandler<ChartItemDataBoundEventArgs>(chart_ItemDataBound);
            seriesMapping.SeriesDefinition.ItemToolTipFormat = "#VAL{#0}%";
            seriesMapping.SeriesDefinition.ItemLabelFormat = "#VAL{#0}%";
 
            seriesMapping.SeriesDefinition.ShowItemToolTips = true;
 
            chart.DefaultView.ChartArea.LabelFormatBehavior = LabelFormatBehavior.None;
            ItemMapping itemMapping = new ItemMapping();
            itemMapping.DataPointMember = DataPointMember.YValue;
 
            itemMapping.FieldName = "Value";
            //   seriesMapping.LegendLabel = strTitle;
 
 
            seriesMapping.ItemMappings.Add(itemMapping);
            itemMapping = new ItemMapping();
            chart.DefaultView.ChartLegend.Visibility = Visibility.Visible;
            itemMapping.DataPointMember = DataPointMember.LegendLabel;
            itemMapping.FieldName = "ProgressStatus";
            seriesMapping.ItemMappings.Add(itemMapping);
            chart.SeriesMappings.Add(seriesMapping);
            chart.DefaultView.ChartArea.AxisX.LabelRotationAngle = -20;
            chart.ItemsSource = b;
            RadSplitContainer rsc = new RadSplitContainer();
            RadPaneGroup rpg = new RadPaneGroup();
 
            RadPane p=new RadPane();
            p.Content=chart;
            rpg.Items.Add(p);
            rsc.Items.Add(rpg);
            Docking.Items.Add(rsc);
0
Evgenia
Telerik team
answered on 07 Aug 2013, 08:02 AM
Hello,

 Thanks for the code attached.
There are several ways you can achieve your requirement.
1. Use the MVVM design pattern and create a property of type Brush which will serve as slice color per each DataItem. You may find detailed description on this in our documentation as well as sample code. Please mind that we are using CustomItemStyleDelegate in order to change the background of each bar from the chart. The same is applicable for Pie series with some specifics that you may find here.

2. Another way to assign custom colors to pie slices is to use PaletteBrushes collection of RadChart. This help topic contains more information and samples on how to use this chart feature.

Regards,
Evgenia
Telerik

TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
0
ESTHER
Top achievements
Rank 1
answered on 21 Jun 2017, 11:00 AM
how to change pie chart slice color.
0
Martin Ivanov
Telerik team
answered on 23 Jun 2017, 12:19 PM
Hello Esther,

You can use the PieSeries' DefaultSliceStyle, SliceStyles and SliceStyleSelector properties. Check the Customizing PieChart Series help article.

Regards,
Martin Ivanov
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Chart
Asked by
Sampada
Top achievements
Rank 1
Answers by
Evgenia
Telerik team
Sampada
Top achievements
Rank 1
ESTHER
Top achievements
Rank 1
Martin Ivanov
Telerik team
Share this question
or