Category Chart

The category chart component is a Ignite UI for Angular charting component that makes visualizing category data easy to do. The control simplifies the complexities of the data visualization domain into manageable API.

Demo

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 component will analyze the data and then 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 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 chart package, the core package must also be installed.

npm install --save igniteui-angular-core
npm install --save igniteui-angular-charts

Required Modules

The IgxCategoryChartComponent requires the following modules:

// app.module.ts
import { IgxCategoryChartModule } from "igniteui-angular-charts/ES5/igx-category-chart-module";

@NgModule({
    imports: [
        // ...
        IgxCategoryChartModule,
        // ...
    ]
})
export class AppModule {}

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 IgxCategoryChartCoreModule, and the dynamic module for the series in question, e.g. IgxLineSeriesDynamicModule. 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 a 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.

 <igx-category-chart [dataSource]="data"
                     width="700px"
                     height="500px">
 </igx-category-chart>

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

Property	Description	Example
`Line`	Specifies category line series with markers at each data point
`Area`	Specifies category area series
`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 series with markers at each data point
`SplineArea`	Specifies category spline area series
`Waterfall`	Specifies category waterfall chart
`Auto`	Specifies automatic selection of chart type based on suggestions from Data Adapter