Custom Doughnut chart colour in code

4 posts, 0 answers
  1. Muhammmad
    Muhammmad avatar
    3 posts
    Member since:
    Sep 2010

    Posted 27 Sep 2010 Link to this post

    Hey everyone,I have Q2 2009 radcontrol silverlight version , so i want to show doughnut chart with own colour not default colour in code (C# .net)  please help me how i can show own colour in donghnut
    here is my code


    ContentControl x:Name="CPie"
                            HorizontalAlignment="Left" Margin="-65,11,0,337" Width="320" Grid.Column="1" >

                <Grid x:Name="LayoutPie">
                    <StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                        <TextBlock TextWrapping="Wrap"
                       Text="Rating Scale" 
                       Style="{StaticResource TextBlockStyle}" Margin="102,5,78,7" FontSize="16" Foreground="#FF00C5FF" d:LayoutOverrides="Width"/>
                        <telerikCharting1:RadChart Background="Transparent"
                                      BorderThickness="0"
     Height="238" Width="238"
                                      HorizontalAlignment="Center"
                                      VerticalAlignment="Center"
                                      x:Name="chart"
                                      ItemsSource="{Binding ChartData}"
                                     >

                            <telerikCharting1:RadChart.DefaultView>
                                <telerikCharting:ChartDefaultView>
                                    <telerikCharting:ChartDefaultView.ChartLegend>
                                        <telerikCharting:ChartLegend x:Name="Legend"
                                               Visibility="Collapsed" />
                                    </telerikCharting:ChartDefaultView.ChartLegend>
                                    <telerikCharting:ChartDefaultView.ChartArea>
                                        <telerikCharting:ChartArea NoDataString="No Data Series"                                          
                                             BorderThickness="0" Margin="7,-27,-7,27"/>
                                    </telerikCharting:ChartDefaultView.ChartArea>
                                </telerikCharting:ChartDefaultView>
                            </telerikCharting1:RadChart.DefaultView>


                        </telerikCharting1:RadChart>

                    </StackPanel>
                </Grid>

            </ContentControl>



      private void ConfigureMonthlySalesPerProduct(string strlegendpercentage)
            {
                char[] badfChar = { '/' };
                string[] str;

                List<PieLegend> pielist = new List<PieLegend>();

                   pielist.Clear(); 
                   str = strlegendpercentage.Split(badfChar);

                   //legend1
                    if (Convert.ToString(str[0]) != "0.00")
                    {
                        pielist.Add(new PieLegend(Legend1, Convert.ToDouble(Convert.ToString(str[0]))));
                    }
                    //legend2
                    if (Convert.ToString(str[1]) != "0.00")
                    {
                        pielist.Add(new PieLegend(Legend2, Convert.ToDouble(Convert.ToString(str[1]))));
                    }
                    //legend3
                    if (Convert.ToString(str[2]) != "0.00")
                    {
                        pielist.Add(new PieLegend(Legend3, Convert.ToDouble(Convert.ToString(str[2]))));
                    }
                    //legend4
                    if (Convert.ToString(str[3]) != "0.00")
                    {
                        pielist.Add(new PieLegend(Legend4, Convert.ToDouble(Convert.ToString(str[3]))));
                    }
                    //legend5
                    if (Convert.ToString(str[4]) != "0.00")
                    {
                        pielist.Add(new PieLegend(Legend5, Convert.ToDouble(Convert.ToString(str[4]))));
                    }
                          
                //List<PersonViewModel> modelList1 = new List<PersonViewModel>();
                //foreach (Person person in studentList1)
                //    modelList1.Add(new PersonViewModel(person));

                chart.DefaultView.ChartLegend.Visibility = System.Windows.Visibility.Collapsed;

                chart.DefaultSeriesDefinition = new DoughnutSeriesDefinition()
                {
                    LabelOffset = 0.74

                };


                chart.DefaultSeriesDefinition.DefaultLabelFormat = "#VAL%";

                SeriesMapping seriesMapping1 = new SeriesMapping();
                seriesMapping1.ItemMappings.Add(new ItemMapping("Grade", DataPointMember.YValue));
                seriesMapping1.ItemMappings.Add(new ItemMapping("Name", DataPointMember.XCategory));

                chart.SeriesMappings.Add(seriesMapping1);
                chart.ItemsSource = pielist;
            }


    please help me is very urgent
  2. Evgenia
    Admin
    Evgenia avatar
    1437 posts

    Posted 30 Sep 2010 Link to this post

    Hello Muhammad,

    Thanks for contacting Telerik support.
    You can set custom color to your Doughnut chart by using PaletteBrushes property of the RadChart. The PaletteBrushes collection on the ChartArea level takes precedence over the one on the RadChart level and the latter takes precedence over the theme resources.When N brushes are added, then the first N Items will use those brushes. Here is how you can set PalleteBrushes with custom colors:

    RadChart1.PaletteBrushes.AddRange(new BrushCollection()
                   {
                       new SolidColorBrush(Colors.Orange),
                       new SolidColorBrush(Colors.Purple),
                       new SolidColorBrush(Colors.Red),
                       new SolidColorBrush(Colors.Green),
                       new SolidColorBrush(Colors.Yellow),
                       new SolidColorBrush(Colors.Blue),
                       new SolidColorBrush(Colors.Cyan),
                       new SolidColorBrush(Colors.Magenta)});


    Hope this helps.

    Greetings,
    Evgenia
    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. Muhammmad
    Muhammmad avatar
    3 posts
    Member since:
    Sep 2010

    Posted 03 Oct 2010 Link to this post

    thanks for reply me ,but PaletteBrushes doesn't support q2 2009 version any alternate solution please provide me  
  4. Evgenia
    Admin
    Evgenia avatar
    1437 posts

    Posted 06 Oct 2010 Link to this post

    Hi Muhammad,

    To be able to have custom Colors for your Dougnut in older versions of the control, you need to provide custom StylesPalette for it. Here is a sample snippet that sets 10 different colors for each doughnut slice (make sure the resource is added to the top UserControl.Resources dictionary) :

    <UserControl.Resources>
            <SolidColorBrush x:Key="RadialItemStroke" Color="#FF000000" />
            <SolidColorBrush x:Key="SeriesItem01Fill" Color="#FF00C6FF" />
            <SolidColorBrush x:Key="SeriesItem02Fill" Color="#FF1BFF00" />
            <SolidColorBrush x:Key="SeriesItem03Fill" Color="#FFFF8D00" />
            <SolidColorBrush x:Key="SeriesItem04Fill" Color="#FFFF2300" />
            <SolidColorBrush x:Key="SeriesItem05Fill" Color="#FFA900FF" />
            <SolidColorBrush x:Key="SeriesItem06Fill" Color="#FFFF00D4" />
            <SolidColorBrush x:Key="SeriesItem07Fill" Color="#FF37ACB3" />
            <SolidColorBrush x:Key="SeriesItem08Fill" Color="#FFB4BF35" />
            <SolidColorBrush x:Key="SeriesItem09Fill" Color="#FF365CA1" />
            <SolidColorBrush x:Key="SeriesItem10Fill" Color="#FF98735D" />
              
            <charting:StylesPalette x:Key="RadialStyle" >
                <Style TargetType="Shape">
                    <Setter Property="Stroke" Value="#FF000000" />
                    <Setter Property="StrokeThickness" Value="1" />
                    <Setter Property="Fill" Value="{StaticResource SeriesItem01Fill}" />
                </Style>
      
                <Style TargetType="Shape">
                    <Setter Property="Stroke" Value="#FF000000" />
                    <Setter Property="StrokeThickness" Value="1" />
                    <Setter Property="Fill" Value="{StaticResource SeriesItem02Fill}" />
                </Style>
      
                <Style TargetType="Shape" >
                    <Setter Property="Stroke" Value="#FF000000" />
                    <Setter Property="StrokeThickness" Value="1" />
                    <Setter Property="Fill" Value="{StaticResource SeriesItem03Fill}" />
                </Style>
      
                <Style TargetType="Shape" >
                    <Setter Property="Stroke" Value="#FF000000" />
                    <Setter Property="StrokeThickness" Value="1" />
                    <Setter Property="Fill" Value="{StaticResource SeriesItem04Fill}" />
                </Style>
      
                <Style TargetType="Shape" >
                    <Setter Property="Stroke" Value="#FF000000" />
                    <Setter Property="StrokeThickness" Value="1" />
                    <Setter Property="Fill" Value="{StaticResource SeriesItem05Fill}" />
                </Style>
      
                <Style TargetType="Shape" >
                    <Setter Property="Stroke" Value="#FF000000" />
                    <Setter Property="StrokeThickness" Value="1" />
                    <Setter Property="Fill" Value="{StaticResource SeriesItem06Fill}" />
                </Style>
      
                <Style TargetType="Shape" >
                    <Setter Property="Stroke" Value="#FF000000" />
                    <Setter Property="StrokeThickness" Value="1" />
                    <Setter Property="Fill" Value="{StaticResource SeriesItem07Fill}" />
                </Style>
      
                <Style TargetType="Shape" >
                    <Setter Property="Stroke" Value="#FF000000" />
                    <Setter Property="StrokeThickness" Value="1" />
                    <Setter Property="Fill" Value="{StaticResource SeriesItem08Fill}" />
                </Style>
      
                <Style TargetType="Shape" >
                    <Setter Property="Stroke" Value="#FF000000" />
                    <Setter Property="StrokeThickness" Value="1" />
                    <Setter Property="Fill" Value="{StaticResource SeriesItem09Fill}" />
                </Style>
      
                <Style TargetType="Shape" >
                    <Setter Property="Stroke" Value="#FF000000" />
                    <Setter Property="StrokeThickness" Value="1" />
                    <Setter Property="Fill" Value="{StaticResource SeriesItem10Fill}" />
                </Style>
            </charting:StylesPalette>


        </UserControl.Resources>

    Feel free to customize the colors as you like and see the difference.

    Hope this helps.

    Regards,
    Evgenia
    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
Back to Top