Category Series

This topic explains various types of category series in the Angular 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. IgxColumnSeriesComponent) or vertical line (e.g. IgxBarSeriesComponent).

Demo

Types of Category Series

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

Series Name Description
IgxAreaSeriesComponent Displays a set of evenly placed points connected by a line below which area is filled in. Categories are arranged horizontally and values – vertically.
IgxBarSeriesComponent 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 IgxColumnSeriesComponent but rotated 90 degrees clockwise.
IgxColumnSeriesComponent 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.
IgxLineSeriesComponent 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.
IgxPointSeriesComponent Displays markers at locations of data points without connecting them by lines. Shape of these markers can be changed using markerType property
IgxSplineSeriesComponent Displays a set of evenly placed points connected by smooth lines that are generated using spline interpolation for improved presentation of data.
IgxSplineAreaSeriesComponent Same as the IgxAreaSeriesComponent type with the added feature of spline interpolation and smoothing for improved presentation of data.
IgxStepLineSeriesComponent Same as the IgxLineSeriesComponent 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.
IgxStepAreaSeriesComponent Same as the IgxStepLineSeriesComponent 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.
IgxWaterfallSeriesComponent 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 Angular 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
IgxBarSeriesComponent IgxCategoryYAxisComponent IgxNumericXAxisComponent
IgxAreaSeriesComponent IgxNumericYAxisComponent IgxCategoryXAxisComponent, IgxOrdinalTimeXAxisComponent, IgxTimeXAxisComponent
IgxColumnSeriesComponent IgxNumericYAxisComponent IgxCategoryXAxisComponent, IgxOrdinalTimeXAxisComponent, IgxTimeXAxisComponent
IgxLineSeriesComponent IgxNumericYAxisComponent IgxCategoryXAxisComponent, IgxOrdinalTimeXAxisComponent, IgxTimeXAxisComponent
IgxSplineSeriesComponent IgxNumericYAxisComponent IgxCategoryXAxisComponent, IgxOrdinalTimeXAxisComponent, IgxTimeXAxisComponent
IgxSplineAreaSeriesComponent IgxNumericYAxisComponent IgxCategoryXAxisComponent, IgxOrdinalTimeXAxisComponent, IgxTimeXAxisComponent
IgxStepAreaSeriesComponent IgxNumericYAxisComponent IgxCategoryXAxisComponent, IgxOrdinalTimeXAxisComponent, IgxTimeXAxisComponent
IgxStepLineSeriesComponent IgxNumericYAxisComponent IgxCategoryXAxisComponent, IgxOrdinalTimeXAxisComponent, IgxTimeXAxisComponent
IgxWaterfallSeriesComponent IgxNumericYAxisComponent IgxCategoryXAxisComponent, IgxOrdinalTimeXAxisComponent, IgxTimeXAxisComponent

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 Label property of the category axis (e.g. IgxCategoryXAxisComponent)
  • 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. IgxLineSeriesComponent)

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

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

Required Modules

The category series require the following modules:

// axis' modules:
import { IgxCategoryXAxis } from 'igniteui-angular-charts';
import { IgxCategoryYAxis } from 'igniteui-angular-charts';
import { IgxNumericYAxis } from 'igniteui-angular-charts';
import { IgxNumericXAxis } from 'igniteui-angular-charts';
// series' modules:
import { IgxAreaSeries } from 'igniteui-angular-charts';
import { IgxBarSeries } from 'igniteui-angular-charts';
import { IgxColumnSeries } from 'igniteui-angular-charts';
import { IgxLineSeries } from 'igniteui-angular-charts';
import { IgxPointSeries } from 'igniteui-angular-charts';
import { IgxSplineSeries } from 'igniteui-angular-charts';
import { IgxSplineAreaSeries } from 'igniteui-angular-charts';
import { IgxStepAreaSeries } from 'igniteui-angular-charts';
import { IgxStepLineSeries } from 'igniteui-angular-charts';
import { IgxWaterfallSeries } from 'igniteui-angular-charts';
// data chart's modules:

import { IgxDataChartCoreModule } from 'igniteui-angular-charts';
import { IgxDataChartCategoryModule } from 'igniteui-angular-charts';

@NgModule({
    imports: [
        // ...
        IgxDataChartCoreModule,
        IgxDataChartCategoryModule,
        // ...
    ]
})

Code Example - Column Series

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

 <igx-data-chart
    [dataSource]="dataSource"
    width="700px"
    height="500px">
    <igx-category-x-axis name="xAxis" label="Year"></igx-category-x-axis>
    <igx-numeric-y-axis  name="yAxis"></igx-numeric-y-axis>
    <igx-column-series
        name="series1"
        xAxisName="xAxis"
        yAxisName="yAxis"
        valueMemberPath="USA">
    </igx-column-series>
 </igx-data-chart>

Code Example - Bar Series

Note that you can also use above code to create other type of category series by replacing IgxColumnSeriesComponent with name of series that you want to render. However, the IgxBarSeriesComponent 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 IgxBarSeriesComponent and bind it to the data source.

 <igx-data-chart
    [dataSource]="dataSource"
    width="700px"
    height="500px">
    <igx-numeric-x-axis  name="xAxis"></igx-numeric-x-axis>
    <igx-category-y-axis name="yAxis" label="Year"></igx-category-y-axis>
    <igx-bar-series
        name="series1"
        xAxisName="xAxis"
        yAxisName="yAxis"
        valueMemberPath="USA">
    </igx-bar-series>
 </igx-data-chart>

Additional Resources