Radar Column Chart

The Blazor Radar Column 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 Column chart creates triangles for the values instead of rectangular bars like regular columns charts do.

Radar column 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. The lack of overlap between the series makes it easy to compare individual values as opposed to overall coverage.

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

To create a radar column chart:

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

A radar column chart that shows comparison between the nutritional composition of two foods

@* Radar Column series*@

<TelerikChart>
    <ChartSeriesItems>
        <ChartSeries Type="@ChartSeriesType.RadarColumn" Name="Soybean" Data="@series1Data">
        </ChartSeries>
        <ChartSeries Type="@ChartSeriesType.RadarColumn" Name="Lentils" Data="@series2Data">
        </ChartSeries>
    </ChartSeriesItems>

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

    <ChartValueAxes>
        <ChartValueAxis Visible="false"></ChartValueAxis>
    </ChartValueAxes>

    <ChartTitle Text="Nutrients per 100g">
    </ChartTitle>

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

</TelerikChart>

@code {
    public List<object> series1Data = new List<object>() { 36, 30, 20 };
    public List<object> series2Data = new List<object>() { 9, 20, 0.4d };
    public string[] xAxisItems = new string[] { "Protein", "Carbohydrates", "Fats" };
}

Radar Column 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).

Gap and Spacing

You can control the distance between the categories that cluster a data point from each series. To do this, use the Gap property of the series. It is the distance between categories expressed as a percentage of the bar width.

To set the distance between the bars of different series in the same category, use the Spacing property. It is the space between the series items in one series category as a proportion of the width of a single series item.

To create overlap, set negative values.

You can configure the values of Gap and Spacing for the whole chart in the first series and they are applied for all categories and series items.

The explanations above treat the general concept of the Gap and Spacing features of the Telerik charts. For radar-type charts the calculations are slightly different and the results will, generally, be less pronounced due to the radial nature of the bars.

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.

See Also

• Live Demo: Radar Column Chart