Data Chart

The React 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.

Demo

Dependencies

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

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

Required Modules

The React data chart component requires the following modules:

// 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";
import { IgrNumberAbbreviatorModule } from 'igniteui-react-charts/ES5/igr-number-abbreviator-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();
IgcNumberAbbreviatorModule.register();

Supported Series

The React data chart 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 React 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

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 bubble 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