Data Chart

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

Demo

Dependencies

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

  • npm install --save igniteui-react-core
  • npm install --save igniteui-react-charts

In order to use the data chart, you need to register the IgrDataChartCoreModule in your app during load:

// data chart's modules required for all series:
import { IgrDataChart } from "igniteui-react-charts/ES5/igr-data-chart";
import { IgrDataChartCoreModule } from 'igniteui-react-charts/ES5/igr-data-chart-core-module';
// scatter series' modules:
import { IgrDataChartScatterCoreModule } from "igniteui-react-charts/ES5/igr-data-chart-scatter-core-module";
import { IgrDataChartScatterModule } from "igniteui-react-charts/ES5/igr-data-chart-scatter-module";
// scatter series elements:
import { IgrNumericYAxis } from "igniteui-react-charts/ES5/igr-numeric-y-axis";
import { IgrNumericXAxis } from "igniteui-react-charts/ES5/igr-numeric-x-axis";
import { IgrBubbleSeries } from "igniteui-react-charts/ES5/igr-bubble-series";
import { IgrSizeScale } from "igniteui-react-charts/ES5/igr-size-scale";
import { IgrValueBrushScale } from "igniteui-react-charts/ES5/igr-value-brush-scale";

IgrDataChartCoreModule.register();
IgrDataChartScatterCoreModule.register();
IgrDataChartScatterModule.register();

Supported Series

The IgrDataChart control 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 IgrDataChart control 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 BarSeries in Category Series group
CategoryXAxis all Financial Series, Range Series, Category Series (except BarSeries)
TimeXAxis all Financial Series, Range Series, Category Series (except BarSeries)
OrdinalTimeXAxis all Financial Series, Range Series, Category Series (except BarSeries)
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 BarSeries in Category Series group
NumericAngleAxis all Polar Series
NumericRadiusAxis all Polar Series and Radial Series
CategoryAngleAxis all Radial Series

Usage

Now that the 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 BubbleSeries and bind it to SampleScatterStats data.

Note

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.

 <IgrDataChart dataSource={this.data}
               width="700px"
               height="500px">
    <IgrNumericXAxis name="xAxis" isLogarithmic="true" />
    <IgrNumericYAxis name="yAxis" isLogarithmic="true"/>
    <IgrBubbleSeries
        name="series1"
        xAxisName="xAxis"
        yAxisName="yAxis"
        xMemberPath="Population"
        yMemberPath="GdpTotal"
        radiusMemberPath="GdpPerCapita"
        dataSource={this.data}  />
 </IgrDataChart>

Additional Resources