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>