React Radial Series

This topic explains various types of radial series in the React data chart component. Radial series a group of series that render data as collection of data points wrapped around a circle, rather than stretching along a horizontal line as Category Series do. Radial series are also mapping a list of categories from the minimum to the maximum of the extent of the chart, and support the same category grouping mechanisms of Category Series.

React Radial Series Example

Types of Radial Series

The following table lists all types of radial series and their descriptions:

Series Name	Description
`IgrRadialAreaSeries`	Displays a filled polygon enclosed by a collection of straight lines connecting data points which are located at the radial (angle/radius) coordinates
`RadialSplineAreaSeries`	Displays a filled polygon enclosed by a collection of smooth/interpolated lines connecting data points which are located at the radial (angle/radius) coordinates
`RadialSplineSeries`	Displays a collection of smooth/interpolated lines connecting data points which are located at the radial (angle/radius) coordinates
`RadialScatterSeries`	Displays a collection of markers representing data points which are located at the radial (angle/radius) coordinates
`IgrRadialLineSeries`	Displays a collection of straight lines connecting data points which are located at the radial (angle/radius) coordinates

Required Axes

The React data chart component provides various types of axes but only the following types of axes can be used with radial series.

Series Type	Radius Axis Type	Angle Axis Type
`IgrRadialAreaSeries`	`IgrNumericRadiusAxis`	`IgrCategoryAngleAxis`
`IgrRadialPieSeries`	`IgrNumericRadiusAxis`	`IgrCategoryAngleAxis`
`IgrRadialColumnSeries`	`IgrNumericRadiusAxis`	`IgrCategoryAngleAxis`
`IgrRadialLineSeries`	`IgrNumericRadiusAxis`	`IgrCategoryAngleAxis`

Required Data

Radial series have the following data requirements:

The data source must be an array or a list of data items
The data source must contain at least one data item otherwise the chart will not render the radial series.
All data items must contain at least one label data column (string or date time) which should be mapped to the IgrLabel property of the category axis (e.g. IgrCategoryAngleAxis)
All data items must contain at least one numeric data column which should be mapped using the valueMemberPath property of radial series (e.g. IgrRadialAreaSeries)

You can use the SampleRadialData as data source which meets above data requirements.

public dataSource: any[] = SampleRadialData.create();

Required Modules

The radial series requires the following modules:

// axis' modules:
import { IgrCategoryAngleAxis } from 'igniteui-react-charts';
import { IgrNumericRadiusAxis } from 'igniteui-react-charts';
// series modules:
import { IgrRadialAreaSeries } from 'igniteui-react-charts';
import { IgrRadialLineSeries } from 'igniteui-react-charts';
import { IgrRadialPieSeries } from 'igniteui-react-charts';
import { IgrRadialColumnSeries } from 'igniteui-react-charts';
// data chart's modules:
import { IgrDataChart } from 'igniteui-react-charts';
import { IgrDataChartCoreModule } from 'igniteui-react-charts';
import { IgrDataChartRadialCoreModule } from 'igniteui-react-charts';
import { IgrDataChartRadialModule } from 'igniteui-react-charts';

// registering data chart's modules:
IgrDataChartCoreModule.register();
IgrDataChartRadialCoreModule.register();
IgrDataChartRadialModule.register();

Code Example

This code demonstrates how to create an instance of data chart with IgrRadialAreaSeries and bind it to the data source.

<IgrDataChart
    dataSource={this.state.dataSource}
    width="700px"
    height="500px">
    <IgrCategoryAngleAxis name="angleAxis" label="Department" />
    <IgrNumericRadiusAxis name="radiusAxis" />
    <IgrRadialPieSeries
        name="series1"
        valueMemberPath="Budget"
        valueAxisName="radiusAxis"
        angleAxisName="angleAxis" />
</IgrDataChart>

const series1 = new IgrRadialPieSeries({ name: "series1" });
series1.valueMemberPath  = "Budget";
series1.radiusAxisName = "radiusAxis";
series1.angleAxisName = "angleAxis";

const radiusAxis = new IgrNumericRadiusAxis({ name: "radiusAxis" });
const angleAxis = new IgrCategoryAngleAxis({ name: "angleAxis" });
angleAxis.label = "Department";

this.chart = new IgrDataChart({ name: "chart" });
this.chart.dataSource = SampleCategoryData.create();
this.chart.axes.add(radiusAxis);
this.chart.axes.add(angleAxis);
this.chart.series.add(series1);

Note that you can also use above code to create other type of radial series by replacing IgrRadialAreaSeries with name of radial series that you want to render.

React Radial Series