React Category Series

This topic explains various types of category series in the React data chart component. Category series is a group of the simplest and most common form of chart series that take data and render it as collection of data points stretched along a horizontal line (e.g. IgrColumnSeries) or vertical line (e.g. IgrBarSeries).

React Category Series Example

Types of Category Series

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

Series Name	Description
`IgrAreaSeries`	Displays a set of evenly placed points connected by a line below which area is filled in. Categories are arranged horizontally and values – vertically.
`IgrBarSeries`	Displays discrete data in separate rows. Unlike other series, categories are arranged vertically and values are plotted horizontally. In other words, this series is like `IgrColumnSeries` but rotated 90 degrees clockwise.
`IgrColumnSeries`	Displays discrete data in separate columns. Categories are arranged horizontally and values are plotted vertically. Used for showing the changes in a data series over time or for comparing multiple items.
`IgrLineSeries`	Displays a set of evenly placed points connected by straight lines. Used for showing data or information that changes continuously over time. Useful when emphasizing the relationship between the points is required.
`IgrPointSeries`	Displays markers at locations of data points without connecting them by lines. Shape of these markers can be changed using `markerType` property
`IgrSplineSeries`	Displays a set of evenly placed points connected by smooth lines that are generated using spline interpolation for improved presentation of data.
`IgrSplineAreaSeries`	Same as the `IgrAreaSeries` type with the added feature of spline interpolation and smoothing for improved presentation of data.
`IgrStepLineSeries`	Same as the `IgrLineSeries` type, except that the values are connected by continuous vertical and horizontal lines forming a step-like progression instead of a straight line tracing the shortest path between points.
`IgrStepAreaSeries`	Same as the `IgrStepLineSeries` type, except that the area below values is filled out instead of continuous vertical and horizontal lines forming a step-like progression for the changes between data points.
`IgrWaterfallSeries`	Displays a set of points as vertical columns that show the difference between values of consecutive data points. The columns are color coded for distinguishing between positive and negative changes in value. Categories are arranged horizontally and values are plotted vertically. Used for showing the changes in a consecutive data points over time or for comparing multiple items.

Required Axes

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

Series Type	YAxis Type	XAxis Type
`IgrBarSeries`	`IgrCategoryYAxis`	`IgrNumericXAxis`
`IgrAreaSeries`	`IgrNumericYAxis`	`IgrCategoryXAxis`, `IgrOrdinalTimeXAxis`, `IgrTimeXAxis`
`IgrColumnSeries`	`IgrNumericYAxis`	`IgrCategoryXAxis`, `IgrOrdinalTimeXAxis`, `IgrTimeXAxis`
`IgrLineSeries`	`IgrNumericYAxis`	`IgrCategoryXAxis`, `IgrOrdinalTimeXAxis`, `IgrTimeXAxis`
`IgrSplineSeries`	`IgrNumericYAxis`	`IgrCategoryXAxis`, `IgrOrdinalTimeXAxis`, `IgrTimeXAxis`
`IgrSplineAreaSeries`	`IgrNumericYAxis`	`IgrCategoryXAxis`, `IgrOrdinalTimeXAxis`, `IgrTimeXAxis`
`IgrStepAreaSeries`	`IgrNumericYAxis`	`IgrCategoryXAxis`, `IgrOrdinalTimeXAxis`, `IgrTimeXAxis`
`IgrStepLineSeries`	`IgrNumericYAxis`	`IgrCategoryXAxis`, `IgrOrdinalTimeXAxis`, `IgrTimeXAxis`
`IgrWaterfallSeries`	`IgrNumericYAxis`	`IgrCategoryXAxis`, `IgrOrdinalTimeXAxis`, `IgrTimeXAxis`

Required Data

Category 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 category series.
All data items must contain at least one data column (string or date time) which should be mapped to the IgrLabel property of the category axis (e.g. IgrCategoryXAxis)
All data items must contain at least one numeric data column which should be mapped using the ValueMemberPath property of a category series (e.g. IgrLineSeries)

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

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

Required Modules

The category series requires the following modules:

// axis' modules:
import { IgrNumericYAxis } from 'igniteui-react-charts';
import { IgrNumericXAxis } from 'igniteui-react-charts';
import { IgrCategoryXAxis } from 'igniteui-react-charts';
import { IgrCategoryYAxis } from 'igniteui-react-charts';
// series' modules:
import { IgrAreaSeries } from 'igniteui-react-charts';
import { IgrBarSeries } from 'igniteui-react-charts';
import { IgrColumnSeries } from 'igniteui-react-charts';
import { IgrLineSeries } from 'igniteui-react-charts';
import { IgrPointSeries } from 'igniteui-react-charts';
import { IgrSplineSeries } from 'igniteui-react-charts';
import { IgrSplineAreaSeries } from 'igniteui-react-charts';
import { IgrStepAreaSeries } from 'igniteui-react-charts';
import { IgrStepLineSeries } from 'igniteui-react-charts';
import { IgrWaterfallSeries } from 'igniteui-react-charts';
// data chart's modules:
import { IgrDataChart } from 'igniteui-react-charts';
import { IgrDataChartCoreModule } from 'igniteui-react-charts';
import { IgrDataChartCategoryModule } from 'igniteui-react-charts';

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

Code Example - Column Series

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

 <IgrDataChart
    dataSource={this.state.dataSource}
    width="700px"
    height="500px">
    {/* axes */}
    <IgrCategoryXAxis name="xAxis" label="Year" />
    <IgrNumericYAxis  name="yAxis" />
    {/* series */}
    <IgrColumnSeries
        name="series1"
        xAxisName="xAxis"
        yAxisName="yAxis"
        valueMemberPath="USA" />
 </IgrDataChart>

const series1 = new IgrColumnSeries({ name: "series1" });
series1.valueMemberPath = "USA";
series1.xAxisName = "xAxis";
series1.yAxisName = "yAxis";

const yAxis = new IgrNumericYAxis({ name: "yAxis" });
const xAxis = new IgrCategoryXAxis({ name: "xAxis" });
xAxis.label = "Year";

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

Code Example - Bar Series

Note that you can also use above code to create other type of category series by replacing IgrColumnSeries with name of series that you want to render. However, the IgrBarSeries is an exception from this rule because it requires different types of axes. This code demonstrates how to create an instance of data chart with IgrBarSeries and bind it to the data source.

 <IgrDataChart
    dataSource={this.state.dataSource}
    width="700px"
    height="500px">
    {/* axes */}
    <IgrNumericXAxis  name="xAxis" />
    <IgrCategoryYAxis name="yAxis" label="Year" />
    {/* series */}
    <IgrBarSeries
        name="series1"
        xAxisName="xAxis"
        yAxisName="yAxis"
        valueMemberPath="USA" />
 </IgrDataChart>

const series1 = new IgrBarSeries({ name: "series1" });
series1.valueMemberPath = "USA";
series1.xAxisName = "xAxis";
series1.yAxisName = "yAxis";

const xAxis = new IgrNumericXAxis({ name: "xAxis" });
const yAxis = new IgrCategoryYAxis({ name: "yAxis" });
yAxis.label = "Year";

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

React Category Series