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 |