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

Color for the center of a doughnut

1 Answer 42 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Al
Top achievements
Rank 1
Al asked on 30 Jan 2017, 05:16 PM

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>

1 Answer, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 01 Feb 2017, 04:59 PM

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.
Tags
Chart
Asked by
Al
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Share this question
or