Web Components Data Chart

The Web Components data chart is a charting component that provides modular design of axis, markers, series, legend, and annotation layers. With this data chart, you can create multiple instances of these visual elements in the same chart plot area in order to create composite chart views.



When installing the Web Components data chart package, the core package must also be installed.

npm install --save igniteui-webcomponents-core
npm install --save igniteui-webcomponents-charts

Required Modules

The Web Components data chart component requires the following modules. to be registered in your application entry point:

  • DataChartCoreModule
  • DataChartScatterCoreModule,
  • DataChartScatterModule,
  • NumberAbbreviatorModule
// Module Manager for registering the modules of the chart
import { ModuleManager } from 'igniteui-webcomponents-core';

import { IgcDataChartCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcNumberAbbreviatorModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartScatterCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartScatterModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartComponent } from 'igniteui-webcomponents-charts';
import { IgcNumericXAxisComponent } from 'igniteui-webcomponents-charts';
import { IgcNumericYAxisComponent } from 'igniteui-webcomponents-charts';
import { IgcBubbleSeriesComponent } from 'igniteui-webcomponents-charts';
import { IgcSizeScaleComponent } from 'igniteui-webcomponents-charts';


Supported Series

The Web Components charting component supports over 65 types of series including Category Series, Financial Series, Polar Series, Radial Series, Range Series, Scatter Series, and Shape Series. Refer to the Series topic, for a full list of supported types of series and how to use them.

Supported Axes

The Web Components data chart component supports various types of axis that are intended to use with specific type of series. The following table lists which axes can be used with type of series. Refer to the Series and Axis topics, for more information on how to use these types of axis.

Axis Type Supported Series Types
CategoryYAxis only bar in Category Series group
CategoryXAxis all Financial Series, Range Series, Category Series (except bar)
TimeXAxis all Financial Series, Range Series, Category Series (except bar)
OrdinalTimeXAxis all Financial Series, Range Series, Category Series (except bar)
PercentChangeYAxis all Financial Series, Range Series, Category Series, Scatter Series, Shape Series
NumericYAxis all Scatter Series, Shape Series, Financial Series, Range Series, Category Series
NumericXAxis all Scatter Series, Shape Series, and bar in Category Series group
NumericAngleAxis all Polar Series
NumericRadiusAxis all Polar Series and Radial Series
CategoryAngleAxis all Radial Series


Now that the Web Components data chart modules are imported, next step is to bind chart to data. All series require specific number and type of data columns to render correctly and you can find a data source for each type of series in the Data Sources topic.

The following code snippet demonstrates how to create scatter bubble and bind it to SampleScatterStats data.


Setting a data source on the chart component will apply to all series but you can also set different data sources on each series added in the data chart.

 <igc-data-chart id="chart"
    <igc-numeric-x-axis id="xAxis"
    <igc-numeric-y-axis id="yAxis"
    <igc-bubble-series id="series1"
let chart = (document.getElementById("chart") as IgcDataChartComponent);
chart.dataSource = data1;

let sizeScale = new IgcSizeScaleComponent();
sizeScale.minimumValue = 10;
sizeScale.maximumValue = 60;

let xAxis = (document.getElementById("xAxis") as IgcNumericXAxisComponent);
let yAxis = (document.getElementById("yAxis") as IgcNumericYAxisComponent);

let series1 = (document.getElementById("series1") as IgcBubbleSeriesComponent);
series1.dataSource = data1;
series1.xAxis = xAxis;
series1.yAxis = yAxis;
series1.radiusScale = sizeScale;

Additional Resources