Configure a Flat 2D RadHtmlChart Pie Chart

Updated on Nov 2, 2026

Environment

Product	Telerik UI for ASP.NET AJAX
Version	2026.3.811

Description

How can I configure a RadHtmlChart pie chart with a fixed size, custom chart and plot-area backgrounds, and a flat appearance without an overlay gradient?

Solution

RadHtmlChart pie charts are rendered in two dimensions. Set the chart Width and Height, configure the chart and plot-area FillStyle, and set Overlay-Gradient="None" on the PieSeries.

ASP.NET

<telerik:RadHtmlChart runat="server" ID="FlatPieChart" Width="600px" Height="400px">
    <Appearance>
        <FillStyle BackgroundColor="#f4f6f8" />
    </Appearance>
    <PlotArea>
        <Appearance>
            <FillStyle BackgroundColor="White" />
        </Appearance>
        <Series>
            <telerik:PieSeries>
                <Appearance Overlay-Gradient="None" />
                <LabelsAppearance Position="OutsideEnd" DataFormatString="{0}%" />
                <TooltipsAppearance DataFormatString="{0}%" />
                <SeriesItems>
                    <telerik:PieSeriesItem BackgroundColor="#4e79a7" Name="Desktop" Y="45" />
                    <telerik:PieSeriesItem BackgroundColor="#f28e2b" Name="Mobile" Y="35" />
                    <telerik:PieSeriesItem BackgroundColor="#59a14f" Name="Tablet" Y="20" />
                </SeriesItems>
            </telerik:PieSeries>
        </Series>
    </PlotArea>
</telerik:RadHtmlChart>

The PieSeriesItem colors control the individual slices. To export the rendered chart as an image, see Export to PDF or Image with RadClientExportManager. For the full pie chart configuration, see Pie Chart.

See Also

• Legend Settings
• Donut Chart