Radar Area Chart

The Blazor Radar Area chart shows the data points on radial lines starting from a common center and act as value axis. The closer the data point to the center, the lower its value. The Radar Area chart connects the data points on each category with lines, and fills up the enclosed space to the center to provide a visual representation of the total enclosed volume.

Radar area charts are often used to make comparisons between several units that depend on a multitude of quantitative factors, with the compared units being the individual series, and the factors being the categories. When backgrounds are semi-transparent, it lets the user clearly see where different sets of data overlap.

This article assumes you are familiar with the chart basics and data binding.

To create a radar area chart:

1. add a ChartSeries to the ChartSeriesItems collection
2. set its Type property to ChartSeriesType.RadarArea
3. provide a data collection to its Data property
4. optionally, provide data for the x-axis Categories

A radar area chart that shows comparison between character evaluations

@* Radar Area series*@

<TelerikChart>
    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.RadarArea" Name="John Smith" Data="@series1Data">
        </ChartSeries>
        <ChartSeries Type="ChartSeriesType.RadarArea" Name="Jane Doe" Data="@series2Data">
        </ChartSeries>
    </ChartSeriesItems>

    <ChartCategoryAxes>
        <ChartCategoryAxis Categories="@xAxisItems"></ChartCategoryAxis>
    </ChartCategoryAxes>

    <ChartTitle Text="Candidate reviews and comparisons"></ChartTitle>

    <ChartLegend Position="Telerik.Blazor.ChartLegendPosition.Right">
    </ChartLegend>
</TelerikChart>

@code {
    public List<object> series1Data = new List<object>() { 10, 3, 3, 10, 2, 10 };
    public List<object> series2Data = new List<object>() { 4, 10, 10, 5, 5, 4 };
    public string[] xAxisItems = new string[] { "Experience", "Communication", "Friendliness", "Subject Knowledge", "Presentation", "Education" };
}

Radar Area Chart Specific Appearance Settings

Color

The color of a series is controlled through the Color property that can take any valid CSS color (for example, #abcdef, #f00, or blue). The color control the fill color of the area.

You can control the color of the line itself separately by using the Color property of the nested TelerikChartSeriesLine tag. To see the line, set its Width parameter to a value larger than 0.

Opacity

You can control how transparent the series fill is through the Opacity property. 0 means a completely transparent series, and 1 means a completely opaque (non-transparent) fill. You can use decimal values to set the desired transparency (for example, Opacity="0.3").

Missing Values

If some values are missing from the series data (they are null), you can have the chart work around this by setting the MissingValues property of the series to the desired behavior (member of the Telerik.Blazor.ChartSeriesMissingValues enum):

• Zero - the default behavior. The line goes to the 0 value mark.
• Interpolate - the line will go through the interpolated value of the missing data points and connect to the next data point with a value.
• Gap - Leaves a gap in the line, so you may end up with disconnected line portions where two items are surrounded by missing values, and other "islands" of color where the chart will connect the adjacent dots as best as it can.

Line Style

You can render the lines between the points with different styles. The supported styles can be set via the Style property of the child ChartSeriesLine tag - it takes a member of Telerik.Blazor.ChartSeriesLineStyle enum:

• Normal—This is the default style. It produces a straight line between data points.
• Step—Behaves in the same way as Normal for a Radar Area chart.
• Smooth—This style causes the Chart to display a fitted curve through data points. It is suitable when the data requires to be displayed with a curve, or when you wish to connect the points with smooth instead of straight lines.

Customize Chart Elements - Nested Tags Settings

When configuring nested properties and child elements in your chart, the inner tags will contain their parent tag name and add specifics to its end. In general the structure of such nested tags will be <Chart*Category**Specifics*> where the Category can be one of the following:

• CategoryAxis
• ChartArea
• Legend
• PlotArea
• SeriesItems
• Title
• Tooltip
• ValueAxis
• XAxes
• YAxes
• and others

To customize the chart, look for nested tags and their properties - the inner tags will contain their parent tag name and add specifics to its end. For example, the ChartSeries tag has a ChartSeriesLabels tag that exposes configuration options and more child tags.

An example of this is the rotation the Labels of a categorical chart. You can use the

ChartCategoryAxes > ChartCategoryAxis > ChartCategoryAxisLabels > ChartCategoryAxisLabelsRotation tag

and set the Angle property to the desired value in degrees (they might be negative or positive numbers). By using similar approach you can take control over ChartCategoryAxisLabelsMargin (add margin for top, bottom, left and right), ChartCategoryAxisLabelsPadding (add padding for top, bottom, left and right) and others.

This approach is not limited only to the Labels - it can be used with all tags that are applicable for the chart type, for example the Chart Title ChartTitle > ChartTitleMargin.

Change the first series line settings, the Color and Font of the Category Axis Labels and the legend border

@* Change the line of the series, the category labels and the legend border *@

<TelerikChart>
    <ChartSeriesItems>
        <ChartSeries Type="@ChartSeriesType.RadarArea" Name="John Smith" Data="@series1Data">
            <ChartSeriesLine Color="blue" Width="5" Style="@ChartSeriesLineStyle.Smooth"></ChartSeriesLine>
        </ChartSeries>
        <ChartSeries Type="@ChartSeriesType.RadarArea" Name="Jane Doe" Data="@series2Data">
        </ChartSeries>
    </ChartSeriesItems>

    <ChartCategoryAxes>
        <ChartCategoryAxis Categories="@xAxisItems">
            <ChartCategoryAxisLabels Color="#008000" Font="bold 12px 'Helvetica'"></ChartCategoryAxisLabels>
        </ChartCategoryAxis>
    </ChartCategoryAxes>

    <ChartTitle Text="Candidate reviews and comparisons">
    </ChartTitle>

    <ChartLegend Position="@Telerik.Blazor.ChartLegendPosition.Right">
        <ChartLegendBorder Color="red" DashType="@DashType.LongDashDotDot" Width="2"></ChartLegendBorder>
    </ChartLegend>

</TelerikChart>

@code {
    public List<object> series1Data = new List<object>() { 10, 8, null, 10, 2, 10 };
    public List<object> series2Data = new List<object>() { 4, 10, 10, 5, 5, 4 };
    public string[] xAxisItems = new string[] { "Experience", "Communication", "Friendliness", "Subject Knowledge", "Presentation", "Education" };
}

See Also

• Live Demo: Radar Area Chart