Color for the center of a doughnut

2 posts, 0 answers
  1. Al
    Al avatar
    3 posts
    Member since:
    Feb 2013

    Posted 30 Jan Link to this post

    Hi,

    We are putting some doughnut charts to track progress on certain items. They work very well, but when the value is zero, the doughnut center takes the color of the outside.  Is there a way to keep the center white?  I can find nothing on controlling the center color.  Thanks.

    Here is our definition:

    <telerik:RadHtmlChart runat="server"
                        ID="RadHtmlChart1"
                        Width="100%"
                        Height="350"
                        Transitions="true"
                        Skin="Metro"
                        EnableTheming="False"
                        RenderMode="Mobile"
                        style="padding-left:30px">

                    <Legend>
                        <Appearance Position="Right" Visible="false">
                        </Appearance>
                    </Legend>
                    <PlotArea>
                        <Series>
                            <telerik:DonutSeries StartAngle="90"  HoleSize="85" DataFieldY="dat" ColorField="color">
                            <LabelsAppearance Visible="false"> </LabelsAppearance>
                                <TooltipsAppearance Color="White" DataFormatString="{0}%"></TooltipsAppearance>
                                <SeriesItems>
                                </SeriesItems>
                            </telerik:DonutSeries>
                        </Series>
                    </PlotArea>
                    </telerik:RadHtmlChart>

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3914 posts

    Posted 01 Feb Link to this post

    Hi,

    I have just answered your support ticket on the same matter and I am pasting here my response in case anyone else has a similar question:


    You can use the  Appearance tag to set the background color of the entire chart: http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/server-side-programming/basic-configuration#attribute-property-in-main-tag--appearance--fillstyle.

    <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="100%" Height="350" Transitions="true" Skin="Metro" EnableTheming="False" RenderMode="Mobile" Style="padding-left: 30px">
        <Legend>
            <Appearance Position="Right" Visible="false">
            </Appearance>
        </Legend>
        <Appearance>
            <FillStyle BackgroundColor="Yellow" />
        </Appearance>
        <PlotArea>
            <Series>
                <telerik:DonutSeries StartAngle="90" HoleSize="70">
                    <SeriesItems>
                        <telerik:PieSeriesItem Y="1" />
                        <telerik:PieSeriesItem Y="2" />
                        <telerik:PieSeriesItem Y="4" />
                    </SeriesItems>
                    <LabelsAppearance Visible="false"></LabelsAppearance>
                    <TooltipsAppearance Color="White" DataFormatString="{0}%"></TooltipsAppearance>
                    <SeriesItems>
                    </SeriesItems>
                </telerik:DonutSeries>
            </Series>
        </PlotArea>
    </telerik:RadHtmlChart>

    Generally, the hole is just blank space that the background shows through. The chart does not change it according to the provided data.

    Regards,

    Marin Bratanov
    Telerik by Progress
    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.
Back to Top