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

How to create custom colors for DonutChart ?

1 Answer 282 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Aravind
Top achievements
Rank 2
Iron
Iron
Iron
Aravind asked on 03 Jul 2013, 03:24 AM
Hi
  How to give custom colors in donut chart series ? my donut client side code is 
 <telerik:RadHtmlChart runat="server" ID="DonutChart" Width="500" Height="300" Transitions="true"
                                                                                        Skin="Default">
                                                                                        <Appearance>
                                                                                            <FillStyle BackgroundColor="White"></FillStyle>
                                                                                        </Appearance>
                                                                                        <ChartTitle Text="Total Files According to Department ">
                                                                                            <Appearance Align="Center" BackgroundColor="White" Position="Top"><TextStyle />
                                                                                            </Appearance>
                                                                                        </ChartTitle>
                                                                                        <Legend>
                                                                                            <Appearance BackgroundColor="White" Position="Right" Visible="true">
                                                                                            </Appearance>
                                                                                        </Legend>
                                                                                        <PlotArea>
                                                                                            <Appearance>
                                                                                                <FillStyle BackgroundColor="White"></FillStyle>
                                                                                            </Appearance>
                                                                                            <Series>
                                                                                                <telerik:DonutSeries StartAngle="90">
                                                                                                    <LabelsAppearance Visible="false">
                                                                                                    </LabelsAppearance>
                                                                                                    <TooltipsAppearance DataFormatString="{0}%"></TooltipsAppearance>
                                                                                                    <SeriesItems>
                                                                                                        <telerik:PieSeriesItem />
                                                                                                    </SeriesItems>
                                                                                                   </telerik:DonutSeries>
                                                                                            </Series>
                                                                                        </PlotArea>
                                                                                    </telerik:RadHtmlChart>


in that i use telerik predefined skin " Default"
and my server side code is 

    DonutChart.PlotArea.Series.Clear()
                Dim col As New DonutSeries()
                col.Items.Clear()
                
                 For Each row1 As DataRow In dt1.Rows

                        Dim se As New SeriesItem()
                         Dim pi As New PieSeriesItem()
                         se.YValue = row1(1).ToString()
                    se.Name = row1(0)
                        col.Items.Add(se)
                Next
        DonutChart.PlotArea.Series.Add(col)

Here how to give custom skin
        like red,yellow,blue,green,black,pink..... upto 10 colors

1 Answer, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 03 Jul 2013, 03:10 PM
Hi Aravind,

For a non-databound chart you can use the Background property, exposed by the series items, in order to specify the color for the particular series item:
PieSeriesItem piesSeriesItem1 = new PieSeriesItem();
piesSeriesItem1.BackgroundColor = System.Drawing.Color.Red;

For a databound chart you can use the ColorField property exposed by the particular series, in order to reference the color field from the datasource:
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="850" Height="500">
    <PlotArea>
        <Series>
            <telerik:DonutSeries ColorField="columnWithColors"></telerik:DonutSeries>
        </Series>
    </PlotArea>
</telerik:RadHtmlChart>


Please find an example with these properties in HtmlChart - Chart Element Customization and HtmlChart - Conditional Item Colorization online demos.

Regards,
Danail Vasilev
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
Chart (HTML5)
Asked by
Aravind
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Danail Vasilev
Telerik team
Share this question
or