HtmlChart - Radar Chart

Demo Configurator

Radar Area
Radar Column
Radar Line
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

The RadarChart is a two-dimensional chart of three or more quantitative factors represented on axes starting from the same point. This chart type is useful in making comparisons between units that depend on such quantitative factors/variables. The closer the point/column of the particular variable is to the center of the chart, the lower its value is. The nearest the point/column of the particular variable is to the edge of the chart, the higher its value is.

RadHtmlChart supports three types of Radar Series. They are only different in the graphical primitives that are drawn. The primitives are a poly line, column and polygon respectively.

  • RadarAreaSeries — in this series type the data points are connected with straight line segments that enclose a filled area.
  • RadarColumnSeries — this series type is represented on the chart as data columns whose height varies according to their value.
  • RadarLineSeries — this series type is represented on the chart as data points connected with straight line.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.HtmlChart.ChartTypes.RadarChart.DefaultCS" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-containers">
        <div class="demo-container size-custom">
            <telerik:RadHtmlChart runat="server" ID="RadarAreaChart" Width="400" Height="400" Transitions="true" Skin="Silk">
                <PlotArea>
                    <Series>
                        <telerik:RadarAreaSeries Name="Knight">
                            <Appearance>
                                <FillStyle BackgroundColor="#f45262"></FillStyle>
                            </Appearance>
                            <LabelsAppearance Visible="false"></LabelsAppearance>
                            <MarkersAppearance Visible="false" />
                            <SeriesItems>
                                <telerik:CategorySeriesItem Y="22"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="7"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="5"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="16"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="11"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="15"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="11"></telerik:CategorySeriesItem>
                            </SeriesItems>
                        </telerik:RadarAreaSeries>
                        <telerik:RadarAreaSeries Name="Archer">
                            <Appearance>
                                <FillStyle BackgroundColor="#f2e123"></FillStyle>
                            </Appearance>
                            <LabelsAppearance Visible="false"></LabelsAppearance>
                            <MarkersAppearance Visible="false" />
                            <SeriesItems>
                                <telerik:CategorySeriesItem Y="20"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="12"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="5"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="16"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="14"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="11"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="7"></telerik:CategorySeriesItem>
                            </SeriesItems>
                        </telerik:RadarAreaSeries>
                        <telerik:RadarAreaSeries Name="Sorcerer">
                            <Appearance>
                                <FillStyle BackgroundColor="#2dc1ec"></FillStyle>
                            </Appearance>
                            <LabelsAppearance Visible="false"></LabelsAppearance>
                            <MarkersAppearance Visible="false" />
                            <SeriesItems>
                                <telerik:CategorySeriesItem Y="8"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="22"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="7"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="11"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="12"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="14"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="11"></telerik:CategorySeriesItem>
                            </SeriesItems>
                        </telerik:RadarAreaSeries>
                        <telerik:RadarAreaSeries Name="Druid">
                            <Appearance>
                                <FillStyle BackgroundColor="#8be264"></FillStyle>
                            </Appearance>
                            <LabelsAppearance Visible="false"></LabelsAppearance>
                            <MarkersAppearance Visible="false" />
                            <SeriesItems>
                                <telerik:CategorySeriesItem Y="9"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="19"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="15"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="11"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="11"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="11"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="9"></telerik:CategorySeriesItem>
                            </SeriesItems>
                        </telerik:RadarAreaSeries>
                    </Series>
                    <Appearance>
                        <FillStyle BackgroundColor="Transparent"></FillStyle>
                    </Appearance>
                    <XAxis Color="Black" MajorTickType="Outside" MinorTickType="Outside"
                        Reversed="false">
                        <LabelsAppearance RotationAngle="0" Step="1" Skip="0">
                        </LabelsAppearance>
                        <MajorGridLines Color="#c8c8c8" Width="1"></MajorGridLines>
                        <MinorGridLines Visible="false"></MinorGridLines>
                        <Items>
                            <telerik:AxisItem LabelText="Might" />
                            <telerik:AxisItem LabelText="Intellect" />
                            <telerik:AxisItem LabelText="Personality" />
                            <telerik:AxisItem LabelText="Endurance" />
                            <telerik:AxisItem LabelText="Accuracy" />
                            <telerik:AxisItem LabelText="Speed" />
                            <telerik:AxisItem LabelText="Luck" />
                        </Items>
                    </XAxis>
                    <YAxis Visible="true" MinValue="10" MaxValue="15">
                        <MajorGridLines Color="#c8c8c8" Width="1" Visible="true"></MajorGridLines>
                        <MinorGridLines Visible="true"></MinorGridLines>
                    </YAxis>
                </PlotArea>
                <Appearance>
                    <FillStyle BackgroundColor="Transparent"></FillStyle>
                </Appearance>
                <ChartTitle Text="Character Base Statistics">
                    <Appearance Align="Center" BackgroundColor="Transparent" Position="Top">
                    </Appearance>
                </ChartTitle>
                <Legend>
                    <Appearance BackgroundColor="Transparent" Position="Bottom">
                    </Appearance>
                </Legend>
            </telerik:RadHtmlChart>
        </div>
        <div class="demo-container size-custom">
            <telerik:RadHtmlChart runat="server" ID="RadarColumnChart" Width="400" Height="400" Transitions="true" Skin="Silk">
                <PlotArea>
                    <Series>
                        <telerik:RadarColumnSeries Name="Wooden Table" Gap="1.5" Spacing="0">
                            <Appearance>
                                <FillStyle BackgroundColor="#f49ca5"></FillStyle>
                            </Appearance>
                            <LabelsAppearance Visible="false"></LabelsAppearance>
                            <TooltipsAppearance DataFormatString="{0} sales"></TooltipsAppearance>
                            <SeriesItems>
                                <telerik:CategorySeriesItem Y="25000"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="12000"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="39000"></telerik:CategorySeriesItem>
                            </SeriesItems>
                        </telerik:RadarColumnSeries>
                        <telerik:RadarColumnSeries Name="Lounge">
                            <Appearance>
                                <FillStyle BackgroundColor="#f45262"></FillStyle>
                            </Appearance>
                            <LabelsAppearance Visible="false"></LabelsAppearance>
                            <TooltipsAppearance DataFormatString="{0} sales"></TooltipsAppearance>
                            <SeriesItems>
                                <telerik:CategorySeriesItem Y="15000"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="23000"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="10000"></telerik:CategorySeriesItem>
                            </SeriesItems>
                        </telerik:RadarColumnSeries>
                        <telerik:RadarColumnSeries Name="Grey Sofa">
                            <Appearance>
                                <FillStyle BackgroundColor="#9c343f"></FillStyle>
                            </Appearance>
                            <LabelsAppearance Visible="false"></LabelsAppearance>
                            <TooltipsAppearance DataFormatString="{0} sales"></TooltipsAppearance>
                            <SeriesItems>
                                <telerik:CategorySeriesItem Y="35000"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="10000"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="20000"></telerik:CategorySeriesItem>
                            </SeriesItems>
                        </telerik:RadarColumnSeries>
                    </Series>
                    <Appearance>
                        <FillStyle BackgroundColor="Transparent"></FillStyle>
                    </Appearance>
                    <XAxis Color="Black" MajorTickType="Outside" MinorTickType="Outside"
                        Reversed="false">
                        <LabelsAppearance DataFormatString="Q{0}" RotationAngle="0" Step="1" Skip="0">
                        </LabelsAppearance>
                        <MajorGridLines Color="#c8c8c8" Width="1"></MajorGridLines>
                        <MinorGridLines Visible="false"></MinorGridLines>
                        <Items>
                            <telerik:AxisItem LabelText="1"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="2"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="3"></telerik:AxisItem>
                        </Items>
                    </XAxis>
                    <YAxis Visible="true" MinValue="11111" MaxValue="22222" MajorTickType="Outside" MinorTickType="Outside" MajorTickSize="50" MinorTickSize="10">
                        <MajorGridLines Color="#c8c8c8" Width="1" Visible="true"></MajorGridLines>
                        <MinorGridLines Visible="true"></MinorGridLines>
                    </YAxis>
                </PlotArea>
                <Appearance>
                    <FillStyle BackgroundColor="Transparent"></FillStyle>
                </Appearance>
                <ChartTitle Text="Product sales for 2011">
                    <Appearance Align="Center" BackgroundColor="Transparent" Position="Top">
                    </Appearance>
                </ChartTitle>
                <Legend>
                    <Appearance BackgroundColor="Transparent" Position="Bottom">
                    </Appearance>
                </Legend>
            </telerik:RadHtmlChart>
        </div>
        <div class="demo-container size-custom">
            <telerik:RadHtmlChart runat="server" ID="RadarLineChart" Width="400" Height="400" Transitions="true" Skin="Silk">
                <PlotArea>
                    <Series>
                        <telerik:RadarLineSeries Name="Week 1" MissingValues="Gap">
                            <Appearance>
                                <FillStyle BackgroundColor="#2dc1ec"></FillStyle>
                            </Appearance>
                            <LabelsAppearance Visible="false">
                            </LabelsAppearance>
                            <MarkersAppearance MarkersType="Circle" BackgroundColor="White" Size="8" BorderColor="#2dc1ec"
                                BorderWidth="2"></MarkersAppearance>
                            <TooltipsAppearance DataFormatString="{0}%"></TooltipsAppearance>
                            <SeriesItems>
                                <telerik:CategorySeriesItem Y="35"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="52"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="28"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="39"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="15"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="84"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="68"></telerik:CategorySeriesItem>
                            </SeriesItems>
                        </telerik:RadarLineSeries>
                        <telerik:RadarLineSeries Name="Week 2" MissingValues="Gap">
                            <Appearance>
                                <FillStyle BackgroundColor="#8be264"></FillStyle>
                            </Appearance>
                            <LabelsAppearance Visible="false">
                            </LabelsAppearance>
                            <MarkersAppearance MarkersType="Square" BackgroundColor="#8be264" Size="8" BorderColor="#8be264"
                                BorderWidth="2"></MarkersAppearance>
                            <TooltipsAppearance DataFormatString="{0}%"></TooltipsAppearance>
                            <SeriesItems>
                                <telerik:CategorySeriesItem Y="15"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="23"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="50"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="20"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="93"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="43"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="23"></telerik:CategorySeriesItem>
                            </SeriesItems>
                        </telerik:RadarLineSeries>
                    </Series>
                    <Appearance>
                        <FillStyle BackgroundColor="Transparent"></FillStyle>
                    </Appearance>
                    <XAxis Color="Black" MajorTickType="Outside" MinorTickType="Outside"
                        Reversed="false">
                        <LabelsAppearance DataFormatString="{0}" RotationAngle="0" Step="1" Skip="0">
                        </LabelsAppearance>
                        <MajorGridLines Color="#c8c8c8" Width="1"></MajorGridLines>
                        <MinorGridLines Visible="false"></MinorGridLines>
                        <Items>
                            <telerik:AxisItem LabelText="Monday"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="Tuesday"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="Wednesday"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="Thursday"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="Friday"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="Saturday"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="Sunday"></telerik:AxisItem>
                        </Items>
                    </XAxis>
                    <YAxis Visible="true" MinValue="11" MaxValue="55">
                        <MajorGridLines Color="#c8c8c8" Width="1"></MajorGridLines>
                        <MinorGridLines Visible="true"></MinorGridLines>
                    </YAxis>
                </PlotArea>
                <Appearance>
                    <FillStyle BackgroundColor="Transparent"></FillStyle>
                </Appearance>
                <ChartTitle Text="Server CPU Load By Days">
                    <Appearance Align="Center" BackgroundColor="Transparent" Position="Top">
                    </Appearance>
                </ChartTitle>
                <Legend>
                    <Appearance BackgroundColor="Transparent" Position="Bottom">
                    </Appearance>
                </Legend>
            </telerik:RadHtmlChart>
        </div>
    </div>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="AreaStartAngle">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadarAreaChart" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="ComboBoxRadarAreaSeriesLineStyle">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadarAreaChart" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="ColumnStartAngle">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadarColumnChart" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="ChartGap">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadarColumnChart" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="ColumnStacked">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadarColumnChart" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="ChartSpacing">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadarColumnChart" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="LineStartAngle">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadarLineChart" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="ComboBoxRadarLineSeriesLineStyle">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadarLineChart" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Skin="Silk">
    </telerik:RadAjaxLoadingPanel>

    <qsf:ConfiguratorPanel ID="Configuratorpanel1" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium" Title="Radar Area">
                    <ul class="fb-group">
                        <li>
                            <qsf:DropDownList runat="server" ID="ComboBoxRadarAreaSeriesLineStyle" AutoPostBack="true" Label="Line Style" Size="Wide"></qsf:DropDownList>
                            <qsf:NumericTextBox ID="AreaStartAngle" runat="server" AutoPostBack="true" MaxLength="3" Value="90" Label="Start Angle" Size="Narrow">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Medium" Title="Radar Column">
                    <ul class="fb-group">
                        <li>
                            <qsf:NumericTextBox ID="ChartGap" runat="server" AutoPostBack="true" MaxLength="3" Value="1.5" Label="Gap" Size="Narrow">
                            </qsf:NumericTextBox>
                            <qsf:NumericTextBox ID="ChartSpacing" runat="server" AutoPostBack="true" MaxLength="3" Value="0" Label="Spacing" Size="Narrow">
                            </qsf:NumericTextBox>
                            <qsf:NumericTextBox ID="ColumnStartAngle" runat="server" AutoPostBack="true" MaxLength="3" Value="90" Label="StartAngle" Size="Narrow">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox runat="server" ID="ColumnStacked" AutoPostBack="true" Text="Stacked"></asp:CheckBox>
                            </span>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Size="Medium" Title="Radar Line">
                    <ul class="fb-group">
                        <li>
                            <qsf:DropDownList runat="server" ID="ComboBoxRadarLineSeriesLineStyle" AutoPostBack="true" Label="Line Style" Size="Wide"></qsf:DropDownList>
                            <qsf:NumericTextBox ID="LineStartAngle" runat="server" AutoPostBack="true" MaxLength="3" Value="90" Label="Start Angle" Size="Narrow">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?