React Chart

The React category chart component make it easy to organize and visualize category data . The React control simplifies the complexities of the data visualization domain into manageable API.

React Chart Example

A user can bind a collection of data, a group of collections, and a data property and let the charting control do the rest. The React component will analyze the data and automatically choose the best chart type to represent the data.

By using a smart Data Adapter, the data is analyzed and the appropriate visualization is rendered. For example, if the chartType property is set to Auto, the control will use a column chart for a small data sets or a line chart for larger data sets.

However, you can also explicitly specify the chart type by setting the chartType to:

Another example of the intuitive behavior of the React category chart component is that you do not need to explicitly set the labels. The category chart will use the first appropriate string property that it finds within the data you provided and will use that for the labels.

Dependencies

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

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

Required Modules

The IgrCategoryChart requires the following modules:

import { IgrCategoryChartModule } from 'igniteui-react-charts';

IgrCategoryChartModule.register();

It's also possible to load a more minimal configuration of category chart whereby it can only load a subset of the possible series, and exclude other optional features by instead loading the IgrCategoryChartCoreModule, and the dynamic module for the series in question, e.g. IgrLineSeriesDynamicModule. If the chartType is Auto, it wil make sure to select a series type that has been loaded.

Usage

Now that the category chart module is imported, next step is to bind it to data.

In order to create React category chart component, you must first have data to bind it to. The following code snippet demonstrates how to create a simple data source.

var data = [
 { "CountryName": "China", "Pop1995": 1216, "Pop2005": 1297, "Pop2015": 1361, "Pop2025": 1394 },
 { "CountryName": "India", "Pop1995": 920, "Pop2005": 1090, "Pop2015": 1251, "Pop2025": 1396 },
 { "CountryName": "United States", "Pop1995": 266, "Pop2005": 295, "Pop2015": 322, "Pop2025": 351 },
 { "CountryName": "Indonesia", "Pop1995": 197, "Pop2005": 229, "Pop2015": 256, "Pop2025": 277 },
 { "CountryName": "Brazil", "Pop1995": 161, "Pop2005": 186, "Pop2015": 204, "Pop2025": 218 }
];

The following code demonstrates how to bind the category chart to the above data.

 <IgrCategoryChart dataSource={this.state.data}
                   width="700px"
                   height="500px" />

Chart Types

You can override the default behavior of the category chart and set which type of chart should be displayed. This is done by setting the chartType property. Below are listed all of the types that the React category chart supports.

Note

Special case is the Auto setting of that property. If Auto is used the chart will analyze assigned data and will assign the most suitable chart type.

Supported Chart Types

Type	Description and Preview
`Auto`	Specifies automatic selection of chart type based on suggestions from built-in data adapter that analyzes data source bound to the chart.
`Line`	Specifies category line chart with markers at each data point.
`Area`	Specifies category area chart.
`Column`	Specifies category column chart with vertical rectangles at each data point.
`Point`	Specifies category point chart with markers at each data point.
`StepLine`	Specifies category step line chart.
`StepArea`	Specifies category step area chart.
`Spline`	Specifies category spline line chart with markers at each data point.
`SplineArea`	Specifies category spline area chart.
`Waterfall`	Specifies category waterfall chart.