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.
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);