Web Components Area Chart
The Ignite UI for Web Components Area Chart renders as a collection of points connected by straight line segments with the area below the line filled in. Values are represented on the y-axis (labels on the left side) and categories are displayed on the x-axis (bottom labels). This chart emphasize the amount of change over a period of time or compare multiple items as well as the relationship of parts of a whole by displaying the total of the plotted values. Therefore, they are often chronological, showing a change of quantity e.g. accumulation of a commodity over time.
Web Components Area Chart Example
You can create Web Components Category Area Chart in the IgcCategoryChartComponent control by binding your data to ItemsSource property and setting chartType property to Area enum, as shown in the example below.
export class CountryRenewableElectricityItem {
public constructor(init: Partial<CountryRenewableElectricityItem>) {
Object.assign(this, init);
}
public year: string;
public europe: number;
public china: number;
public america: number;
}
export class CountryRenewableElectricity extends Array<CountryRenewableElectricityItem> {
public constructor(items: Array<CountryRenewableElectricityItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CountryRenewableElectricityItem(
{
year: `2009`,
europe: 34,
china: 21,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2010`,
europe: 43,
china: 26,
america: 24
}),
new CountryRenewableElectricityItem(
{
year: `2011`,
europe: 66,
china: 29,
america: 28
}),
new CountryRenewableElectricityItem(
{
year: `2012`,
europe: 69,
china: 32,
america: 26
}),
new CountryRenewableElectricityItem(
{
year: `2013`,
europe: 58,
china: 47,
america: 38
}),
new CountryRenewableElectricityItem(
{
year: `2014`,
europe: 40,
china: 46,
america: 31
}),
new CountryRenewableElectricityItem(
{
year: `2015`,
europe: 78,
china: 50,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2016`,
europe: 13,
china: 90,
america: 52
}),
new CountryRenewableElectricityItem(
{
year: `2017`,
europe: 78,
china: 132,
america: 50
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2019`,
europe: 80,
china: 96,
america: 38
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcLegendModule,
IgcCategoryChartModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcCategoryChartComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
this._bind = () => {
chart.dataSource = this.countryRenewableElectricity;
chart.legend = this.legend;
}
this._bind();
}
private _countryRenewableElectricity: CountryRenewableElectricity = null;
public get countryRenewableElectricity(): CountryRenewableElectricity {
if (this._countryRenewableElectricity == null)
{
this._countryRenewableElectricity = new CountryRenewableElectricity();
}
return this._countryRenewableElectricity;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="legend-title">
Renewable Electricity Generated
</div>
<div class="legend">
<igc-legend
name="legend"
id="legend"
orientation="Horizontal">
</igc-legend>
</div>
<div class="container fill">
<igc-category-chart
name="chart"
id="chart"
chart-type="Area"
included-properties="year, europe, china, america"
y-axis-title="TWh"
y-axis-title-left-margin="10"
y-axis-title-right-margin="5"
y-axis-label-left-margin="0"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false"
computed-plot-area-margin-mode="Series">
</igc-category-chart>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.
Area Chart Recommendations
Area Chart Use Cases
There are several common use cases for choosing an Area Chart:
- Have a large, high-volume data set that fits well with the chart interactions like Panning, Zooming, and Drill-down.
- Need to compare the trends of your data over time.
- Want to show the difference between 2 or more data series.
- Want to show cumulative part-to-whole comparisons of distinct categories.
- Need to show data trends for one or more categories for comparative analysis.
- Need to visualize details time-series data.
Area Chart Best Practices
- Always start the Y-Axis (left or right axis) at 0 so data comparison is accurate.
- Order time-series data from left to right.
- Use transparent colors to ensure that data that is plotted behind another series is not blocked.
When Not to Use Area Charts
- You have many (more than 7 or 10) series of data. Your goal is to ensure the chart is readable.
- Time-series data has similar values (data over the same period). This makes overlapped shaded areas impossible to differentiate.
Area Chart Data Structure
- The data source must be an array or a list of data items (for single series).
- The data source must be an array of arrays or a list of lists (for multiple series).
- The data source should contain two or more data items in order to render a line between them.
- All data items must contain at least one data column (string or date time).
- All data items must contain at least one numeric data column.
Web Components Area Chart with Single Series
Web Components Area Chart is often used to show the change of value over time such as the amount of renewable electricity produced. You can create this type of chart in IgcCategoryChartComponent control by binding your data and setting chartType property to Area value, as shown in the example below.
export class CountryRenewableElectricityItem {
public constructor(init: Partial<CountryRenewableElectricityItem>) {
Object.assign(this, init);
}
public year: string;
public europe: number;
public china: number;
public america: number;
}
export class CountryRenewableElectricity extends Array<CountryRenewableElectricityItem> {
public constructor(items: Array<CountryRenewableElectricityItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CountryRenewableElectricityItem(
{
year: `2009`,
europe: 34,
china: 21,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2010`,
europe: 43,
china: 26,
america: 24
}),
new CountryRenewableElectricityItem(
{
year: `2011`,
europe: 66,
china: 29,
america: 28
}),
new CountryRenewableElectricityItem(
{
year: `2012`,
europe: 69,
china: 32,
america: 26
}),
new CountryRenewableElectricityItem(
{
year: `2013`,
europe: 58,
china: 47,
america: 38
}),
new CountryRenewableElectricityItem(
{
year: `2014`,
europe: 40,
china: 46,
america: 31
}),
new CountryRenewableElectricityItem(
{
year: `2015`,
europe: 78,
china: 50,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2016`,
europe: 13,
china: 90,
america: 52
}),
new CountryRenewableElectricityItem(
{
year: `2017`,
europe: 78,
china: 132,
america: 50
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2019`,
europe: 80,
china: 96,
america: 38
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcCategoryChartModule
);
export class Sample {
private chart: IgcCategoryChartComponent
private _bind: () => void;
constructor() {
var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
this._bind = () => {
chart.dataSource = this.countryRenewableElectricity;
}
this._bind();
}
private _countryRenewableElectricity: CountryRenewableElectricity = null;
public get countryRenewableElectricity(): CountryRenewableElectricity {
if (this._countryRenewableElectricity == null)
{
this._countryRenewableElectricity = new CountryRenewableElectricity();
}
return this._countryRenewableElectricity;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="legend-title">
Renewable Electricity Generated
</div>
<div class="container fill">
<igc-category-chart
name="chart"
id="chart"
included-properties="year, europe"
chart-type="Area"
y-axis-title="TWh"
y-axis-title-left-margin="10"
y-axis-title-right-margin="5"
y-axis-label-left-margin="0"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false"
computed-plot-area-margin-mode="Series">
</igc-category-chart>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
Web Components Area Chart with Multiple Series
Similarly to how you can show multiple Line Chart and Spline Chart, you may also combine multiple Area Charts in the same control. This is accomplished by binding multiple data source to ItemsSource property of the IgcCategoryChartComponent control.
export class CountryRenewableElectricityItem {
public constructor(init: Partial<CountryRenewableElectricityItem>) {
Object.assign(this, init);
}
public year: string;
public europe: number;
public china: number;
public america: number;
}
export class CountryRenewableElectricity extends Array<CountryRenewableElectricityItem> {
public constructor(items: Array<CountryRenewableElectricityItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CountryRenewableElectricityItem(
{
year: `2009`,
europe: 34,
china: 21,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2010`,
europe: 43,
china: 26,
america: 24
}),
new CountryRenewableElectricityItem(
{
year: `2011`,
europe: 66,
china: 29,
america: 28
}),
new CountryRenewableElectricityItem(
{
year: `2012`,
europe: 69,
china: 32,
america: 26
}),
new CountryRenewableElectricityItem(
{
year: `2013`,
europe: 58,
china: 47,
america: 38
}),
new CountryRenewableElectricityItem(
{
year: `2014`,
europe: 40,
china: 46,
america: 31
}),
new CountryRenewableElectricityItem(
{
year: `2015`,
europe: 78,
china: 50,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2016`,
europe: 13,
china: 90,
america: 52
}),
new CountryRenewableElectricityItem(
{
year: `2017`,
europe: 78,
china: 132,
america: 50
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2019`,
europe: 80,
china: 96,
america: 38
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcLegendModule,
IgcCategoryChartModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcCategoryChartComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
this._bind = () => {
chart.dataSource = this.countryRenewableElectricity;
chart.legend = this.legend;
}
this._bind();
}
private _countryRenewableElectricity: CountryRenewableElectricity = null;
public get countryRenewableElectricity(): CountryRenewableElectricity {
if (this._countryRenewableElectricity == null)
{
this._countryRenewableElectricity = new CountryRenewableElectricity();
}
return this._countryRenewableElectricity;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="legend-title">
Renewable Electricity Generated
</div>
<div class="legend">
<igc-legend
name="legend"
id="legend"
orientation="Horizontal">
</igc-legend>
</div>
<div class="container fill">
<igc-category-chart
name="chart"
id="chart"
chart-type="Area"
included-properties="year, europe, china, america"
y-axis-title="TWh"
y-axis-title-left-margin="10"
y-axis-title-right-margin="5"
y-axis-label-left-margin="0"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false"
computed-plot-area-margin-mode="Series">
</igc-category-chart>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
Web Components Area Chart Styling
Area charts often have semi-transparent fill for their areas, thicker lines and slightly larger markers than usual. Below is an example showing how you can style the Area Chart from earlier accordingly.
export class CountryRenewableElectricityItem {
public constructor(init: Partial<CountryRenewableElectricityItem>) {
Object.assign(this, init);
}
public year: string;
public europe: number;
public china: number;
public america: number;
}
export class CountryRenewableElectricity extends Array<CountryRenewableElectricityItem> {
public constructor(items: Array<CountryRenewableElectricityItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CountryRenewableElectricityItem(
{
year: `2009`,
europe: 34,
china: 21,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2010`,
europe: 43,
china: 26,
america: 24
}),
new CountryRenewableElectricityItem(
{
year: `2011`,
europe: 66,
china: 29,
america: 28
}),
new CountryRenewableElectricityItem(
{
year: `2012`,
europe: 69,
china: 32,
america: 26
}),
new CountryRenewableElectricityItem(
{
year: `2013`,
europe: 58,
china: 47,
america: 38
}),
new CountryRenewableElectricityItem(
{
year: `2014`,
europe: 40,
china: 46,
america: 31
}),
new CountryRenewableElectricityItem(
{
year: `2015`,
europe: 78,
china: 50,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2016`,
europe: 13,
china: 90,
america: 52
}),
new CountryRenewableElectricityItem(
{
year: `2017`,
europe: 78,
china: 132,
america: 50
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2019`,
europe: 80,
china: 96,
america: 38
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcLegendModule,
IgcCategoryChartModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcCategoryChartComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
this._bind = () => {
chart.dataSource = this.countryRenewableElectricity;
chart.legend = this.legend;
}
this._bind();
}
private _countryRenewableElectricity: CountryRenewableElectricity = null;
public get countryRenewableElectricity(): CountryRenewableElectricity {
if (this._countryRenewableElectricity == null)
{
this._countryRenewableElectricity = new CountryRenewableElectricity();
}
return this._countryRenewableElectricity;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="legend-title">
Renewable Electricity Generated
</div>
<div class="legend">
<igc-legend
name="legend"
id="legend"
orientation="Horizontal">
</igc-legend>
</div>
<div class="container fill">
<igc-category-chart
name="chart"
id="chart"
included-properties="year, europe, china, america"
chart-type="Area"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false"
marker-brushes="white"
marker-outlines="rgba(140, 231, 217, 1) rgba(238, 88, 121, 1) rgba(115, 86, 86, 1)"
brushes="rgba(140, 231, 217, 1) rgba(238, 88, 121, 1) rgba(115, 86, 86, 1)"
outlines="rgba(140, 231, 217, 1) rgba(238, 88, 121, 1) rgba(115, 86, 86, 1)"
y-axis-title="TWh"
y-axis-title-left-margin="10"
y-axis-label-left-margin="0"
tool-tip-type="Category"
thickness="2"
computed-plot-area-margin-mode="Series">
</igc-category-chart>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
Advanced Types of Area Charts
The following sections explain more advanced types of Web Components Area Charts that can be created using the IgcDataChartComponent control instead of IgcCategoryChartComponent control with simplified API.
Web Components Step Area Chart
The Web Components Step Area Chart belongs to a group of category charts and it is rendered using a collection of points connected by continuous vertical and horizontal lines with the area below lines filled in. Values are represented on the y-axis and categories are displayed on the x-axis. The step area chart emphasizes the amount of change over a period of time or compares multiple items. You can create this type of chart in IgcCategoryChartComponent control by binding your data and setting chartType property to StepArea value, as shown in the example below.
export class CountryRenewableElectricityItem {
public constructor(init: Partial<CountryRenewableElectricityItem>) {
Object.assign(this, init);
}
public year: string;
public europe: number;
public china: number;
public america: number;
}
export class CountryRenewableElectricity extends Array<CountryRenewableElectricityItem> {
public constructor(items: Array<CountryRenewableElectricityItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CountryRenewableElectricityItem(
{
year: `2009`,
europe: 34,
china: 21,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2010`,
europe: 43,
china: 26,
america: 24
}),
new CountryRenewableElectricityItem(
{
year: `2011`,
europe: 66,
china: 29,
america: 28
}),
new CountryRenewableElectricityItem(
{
year: `2012`,
europe: 69,
china: 32,
america: 26
}),
new CountryRenewableElectricityItem(
{
year: `2013`,
europe: 58,
china: 47,
america: 38
}),
new CountryRenewableElectricityItem(
{
year: `2014`,
europe: 40,
china: 46,
america: 31
}),
new CountryRenewableElectricityItem(
{
year: `2015`,
europe: 78,
china: 50,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2016`,
europe: 13,
china: 90,
america: 52
}),
new CountryRenewableElectricityItem(
{
year: `2017`,
europe: 78,
china: 132,
america: 50
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2019`,
europe: 80,
china: 96,
america: 38
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcLegendModule, IgcCategoryChartModule, IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcLegendModule,
IgcCategoryChartModule,
IgcDataChartInteractivityModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcCategoryChartComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
this._bind = () => {
chart.dataSource = this.countryRenewableElectricity;
chart.legend = this.legend;
}
this._bind();
}
private _countryRenewableElectricity: CountryRenewableElectricity = null;
public get countryRenewableElectricity(): CountryRenewableElectricity {
if (this._countryRenewableElectricity == null)
{
this._countryRenewableElectricity = new CountryRenewableElectricity();
}
return this._countryRenewableElectricity;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="legend-title">
Renewable Electricity Generated
</div>
<div class="legend">
<igc-legend
name="legend"
id="legend"
orientation="Horizontal">
</igc-legend>
</div>
<div class="container fill">
<igc-category-chart
name="chart"
id="chart"
chart-type="StepArea"
title-alignment="Left"
title-left-margin="25"
title-top-margin="10"
title-bottom-margin="10"
is-category-highlighting-enabled="true"
is-series-highlighting-enabled="true"
is-transition-in-enabled="true"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false"
y-axis-title="TWh"
crosshairs-snap-to-data="true">
</igc-category-chart>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
Advanced Types of Area Charts
The following sections explain more advanced types of Web Components Area Charts that can be created using the IgcDataChartComponent control instead of IgcCategoryChartComponent control with simplified API.
Web Components Range Area Chart
The Web Components Range Area Chart allows you show the area as a range between two values over time. You can create this type of chart in IgcDataChartComponent control by binding your data to IgcRangeAreaSeriesComponent, as shown in the example below.
export class TemperatureRangeDataItem {
public constructor(init: Partial<TemperatureRangeDataItem>) {
Object.assign(this, init);
}
public month: string;
public highNY: number;
public lowNY: number;
public highLA: number;
public lowLA: number;
}
export class TemperatureRangeData extends Array<TemperatureRangeDataItem> {
public constructor(items: Array<TemperatureRangeDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new TemperatureRangeDataItem(
{
month: `Jan`,
highNY: 10.6,
lowNY: -6.6,
highLA: 28.3,
lowLA: 7.8
}),
new TemperatureRangeDataItem(
{
month: `Feb`,
highNY: 7.8,
lowNY: -9.9,
highLA: 31.1,
lowLA: 5.6
}),
new TemperatureRangeDataItem(
{
month: `Mar`,
highNY: 12.2,
lowNY: -3.8,
highLA: 27.8,
lowLA: 8.3
}),
new TemperatureRangeDataItem(
{
month: `Apr`,
highNY: 11.7,
lowNY: 2.2,
highLA: 33.9,
lowLA: 10.6
}),
new TemperatureRangeDataItem(
{
month: `May`,
highNY: 19.4,
lowNY: 1.1,
highLA: 35,
lowLA: 13.9
}),
new TemperatureRangeDataItem(
{
month: `Jun`,
highNY: 23.3,
lowNY: 10.6,
highLA: 36.7,
lowLA: 16.1
}),
new TemperatureRangeDataItem(
{
month: `Jul`,
highNY: 27.2,
lowNY: 19.4,
highLA: 33.3,
lowLA: 15.6
}),
new TemperatureRangeDataItem(
{
month: `Aug`,
highNY: 25.6,
lowNY: 16.7,
highLA: 36.7,
lowLA: 15.6
}),
new TemperatureRangeDataItem(
{
month: `Sep`,
highNY: 22.8,
lowNY: 8.9,
highLA: 43.9,
lowLA: 16.1
}),
new TemperatureRangeDataItem(
{
month: `Oct`,
highNY: 17.8,
lowNY: 0,
highLA: 38.3,
lowLA: 11.1
}),
new TemperatureRangeDataItem(
{
month: `Nov`,
highNY: 17.8,
lowNY: -1,
highLA: 32.8,
lowLA: 6.7
}),
new TemperatureRangeDataItem(
{
month: `Dec`,
highNY: 8.3,
lowNY: -6.6,
highLA: 28.9,
lowLA: 5.6
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule, IgcLegendModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcRangeAreaSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
import { TemperatureRangeDataItem, TemperatureRangeData } from './TemperatureRangeData';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcDataChartCoreModule,
IgcDataChartCategoryModule,
IgcDataChartInteractivityModule,
IgcDataChartAnnotationModule,
IgcLegendModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcDataChartComponent
private xAxis: IgcCategoryXAxisComponent
private yAxis: IgcNumericYAxisComponent
private rangeAreaSeries1: IgcRangeAreaSeriesComponent
private rangeAreaSeries2: IgcRangeAreaSeriesComponent
private dataToolTipLayer: IgcDataToolTipLayerComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent;
var xAxis = this.xAxis = document.getElementById('xAxis') as IgcCategoryXAxisComponent;
var yAxis = this.yAxis = document.getElementById('yAxis') as IgcNumericYAxisComponent;
var rangeAreaSeries1 = this.rangeAreaSeries1 = document.getElementById('rangeAreaSeries1') as IgcRangeAreaSeriesComponent;
var rangeAreaSeries2 = this.rangeAreaSeries2 = document.getElementById('rangeAreaSeries2') as IgcRangeAreaSeriesComponent;
var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('dataToolTipLayer') as IgcDataToolTipLayerComponent;
this._bind = () => {
chart.legend = this.legend;
xAxis.dataSource = this.temperatureRangeData;
rangeAreaSeries1.xAxis = this.xAxis;
rangeAreaSeries1.yAxis = this.yAxis;
rangeAreaSeries1.dataSource = this.temperatureRangeData;
rangeAreaSeries2.xAxis = this.xAxis;
rangeAreaSeries2.yAxis = this.yAxis;
rangeAreaSeries2.dataSource = this.temperatureRangeData;
}
this._bind();
}
private _temperatureRangeData: TemperatureRangeData = null;
public get temperatureRangeData(): TemperatureRangeData {
if (this._temperatureRangeData == null)
{
this._temperatureRangeData = new TemperatureRangeData();
}
return this._temperatureRangeData;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="legend-title">
Monthly Temperature Range in LA and NYC
</div>
<div class="legend">
<igc-legend
name="legend"
id="legend"
orientation="Horizontal">
</igc-legend>
</div>
<div class="container fill">
<igc-data-chart
name="chart"
id="chart"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false">
<igc-category-x-axis
name="xAxis"
id="xAxis"
label="month"
interval="1">
</igc-category-x-axis>
<igc-numeric-y-axis
name="yAxis"
id="yAxis"
title="Temperature (in Celsius)"
title-angle="90"
title-left-margin="10">
</igc-numeric-y-axis>
<igc-range-area-series
name="rangeAreaSeries1"
id="rangeAreaSeries1"
title="Los Angeles"
low-member-path="lowLA"
high-member-path="highLA"
show-default-tooltip="false">
</igc-range-area-series>
<igc-range-area-series
name="rangeAreaSeries2"
id="rangeAreaSeries2"
title="New York"
low-member-path="lowNY"
high-member-path="highNY"
show-default-tooltip="false">
</igc-range-area-series>
<igc-data-tool-tip-layer
name="dataToolTipLayer"
id="dataToolTipLayer">
</igc-data-tool-tip-layer>
</igc-data-chart>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
Web Components Stacked Area Chart
The Web Components Stacked Area Chars is rendered using a collection of points connected by line segments, with the area below the line filled in and stacked on top of each other. Stacked Area Charts follow all the same requirements as Area Charts, with the only difference being that visually, the shaded areas are stacked on top of each other. You can create this type of chart in IgcDataChartComponent control by binding your data to IgcStackedAreaSeriesComponent, as shown in the example below.
export class ContinentsBirthRateItem {
public constructor(init: Partial<ContinentsBirthRateItem>) {
Object.assign(this, init);
}
public Year: string;
public Asia: number;
public Africa: number;
public Europe: number;
public NorthAmerica: number;
public SouthAmerica: number;
public Oceania: number;
}
export class ContinentsBirthRate extends Array<ContinentsBirthRateItem> {
public constructor(items: Array<ContinentsBirthRateItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new ContinentsBirthRateItem(
{
Year: `1950`,
Asia: 62,
Africa: 13,
Europe: 10,
NorthAmerica: 4,
SouthAmerica: 8,
Oceania: 1
}),
new ContinentsBirthRateItem(
{
Year: `1960`,
Asia: 68,
Africa: 12,
Europe: 15,
NorthAmerica: 4,
SouthAmerica: 9,
Oceania: 2
}),
new ContinentsBirthRateItem(
{
Year: `1970`,
Asia: 80,
Africa: 17,
Europe: 11,
NorthAmerica: 3,
SouthAmerica: 9,
Oceania: 1
}),
new ContinentsBirthRateItem(
{
Year: `1980`,
Asia: 77,
Africa: 21,
Europe: 12,
NorthAmerica: 3,
SouthAmerica: 10,
Oceania: 2
}),
new ContinentsBirthRateItem(
{
Year: `1990`,
Asia: 87,
Africa: 24,
Europe: 9,
NorthAmerica: 3,
SouthAmerica: 10,
Oceania: 1
}),
new ContinentsBirthRateItem(
{
Year: `2000`,
Asia: 79,
Africa: 28,
Europe: 8,
NorthAmerica: 4,
SouthAmerica: 9,
Oceania: 3
}),
new ContinentsBirthRateItem(
{
Year: `2010`,
Asia: 78,
Africa: 35,
Europe: 10,
NorthAmerica: 4,
SouthAmerica: 8,
Oceania: 2
}),
new ContinentsBirthRateItem(
{
Year: `2020`,
Asia: 75,
Africa: 43,
Europe: 7,
NorthAmerica: 4,
SouthAmerica: 7,
Oceania: 4
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartCategoryCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule, IgcDataChartStackedModule, IgcStackedFragmentSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcStackedAreaSeriesComponent, IgcStackedFragmentSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
import { ContinentsBirthRateItem, ContinentsBirthRate } from './ContinentsBirthRate';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcLegendModule,
IgcDataChartCoreModule,
IgcDataChartCategoryModule,
IgcDataChartCategoryCoreModule,
IgcDataChartInteractivityModule,
IgcDataChartAnnotationModule,
IgcDataChartStackedModule,
IgcStackedFragmentSeriesModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcDataChartComponent
private xAxis: IgcCategoryXAxisComponent
private yAxis: IgcNumericYAxisComponent
private stackedAreaSeries: IgcStackedAreaSeriesComponent
private s1: IgcStackedFragmentSeriesComponent
private s2: IgcStackedFragmentSeriesComponent
private s3: IgcStackedFragmentSeriesComponent
private s4: IgcStackedFragmentSeriesComponent
private s5: IgcStackedFragmentSeriesComponent
private dataToolTipLayer: IgcDataToolTipLayerComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent;
var xAxis = this.xAxis = document.getElementById('xAxis') as IgcCategoryXAxisComponent;
var yAxis = this.yAxis = document.getElementById('yAxis') as IgcNumericYAxisComponent;
var stackedAreaSeries = this.stackedAreaSeries = document.getElementById('stackedAreaSeries') as IgcStackedAreaSeriesComponent;
var s1 = this.s1 = document.getElementById('s1') as IgcStackedFragmentSeriesComponent;
var s2 = this.s2 = document.getElementById('s2') as IgcStackedFragmentSeriesComponent;
var s3 = this.s3 = document.getElementById('s3') as IgcStackedFragmentSeriesComponent;
var s4 = this.s4 = document.getElementById('s4') as IgcStackedFragmentSeriesComponent;
var s5 = this.s5 = document.getElementById('s5') as IgcStackedFragmentSeriesComponent;
var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('dataToolTipLayer') as IgcDataToolTipLayerComponent;
this._bind = () => {
chart.legend = this.legend;
xAxis.dataSource = this.continentsBirthRate;
stackedAreaSeries.dataSource = this.continentsBirthRate;
stackedAreaSeries.xAxis = this.xAxis;
stackedAreaSeries.yAxis = this.yAxis;
}
this._bind();
}
private _continentsBirthRate: ContinentsBirthRate = null;
public get continentsBirthRate(): ContinentsBirthRate {
if (this._continentsBirthRate == null)
{
this._continentsBirthRate = new ContinentsBirthRate();
}
return this._continentsBirthRate;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="legend-title">
Annual Birth Rates by World Region
</div>
<div class="legend">
<igc-legend
name="legend"
id="legend"
orientation="Horizontal">
</igc-legend>
</div>
<div class="container fill">
<igc-data-chart
name="chart"
id="chart"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false">
<igc-category-x-axis
name="xAxis"
id="xAxis"
label="Year"
gap="0.75">
</igc-category-x-axis>
<igc-numeric-y-axis
name="yAxis"
id="yAxis"
minimum-value="0"
maximum-value="140"
interval="20"
title="Millions of Births"
title-angle="-90"
label-format="{0} m">
</igc-numeric-y-axis>
<igc-stacked-area-series
name="stackedAreaSeries"
id="stackedAreaSeries"
show-default-tooltip="true"
marker-type="Circle">
<igc-stacked-fragment-series
name="s1"
id="s1"
value-member-path="Asia"
title="Asia">
</igc-stacked-fragment-series>
<igc-stacked-fragment-series
name="s2"
id="s2"
value-member-path="Africa"
title="Africa">
</igc-stacked-fragment-series>
<igc-stacked-fragment-series
name="s3"
id="s3"
value-member-path="Europe"
title="Europe">
</igc-stacked-fragment-series>
<igc-stacked-fragment-series
name="s4"
id="s4"
value-member-path="NorthAmerica"
title="North America">
</igc-stacked-fragment-series>
<igc-stacked-fragment-series
name="s5"
id="s5"
value-member-path="SouthAmerica"
title="South America">
</igc-stacked-fragment-series>
</igc-stacked-area-series>
<igc-data-tool-tip-layer
name="dataToolTipLayer"
id="dataToolTipLayer">
</igc-data-tool-tip-layer>
</igc-data-chart>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
Web Components Stacked 100% Area Chart
The Web Components Stacked 100% Area Chart allows you represent your data as part of a whole being changed over time e.g. a country's energy consumption related to the sources from which it is produced. In such cases representing all stacked elements equally may be a better idea. You can create this type of chart in IgcDataChartComponent control by binding your data to IgcStacked100AreaSeriesComponent, as shown in the example below.
export class ContinentsBirthRateItem {
public constructor(init: Partial<ContinentsBirthRateItem>) {
Object.assign(this, init);
}
public Year: string;
public Asia: number;
public Africa: number;
public Europe: number;
public NorthAmerica: number;
public SouthAmerica: number;
public Oceania: number;
}
export class ContinentsBirthRate extends Array<ContinentsBirthRateItem> {
public constructor(items: Array<ContinentsBirthRateItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new ContinentsBirthRateItem(
{
Year: `1950`,
Asia: 62,
Africa: 13,
Europe: 10,
NorthAmerica: 4,
SouthAmerica: 8,
Oceania: 1
}),
new ContinentsBirthRateItem(
{
Year: `1960`,
Asia: 68,
Africa: 12,
Europe: 15,
NorthAmerica: 4,
SouthAmerica: 9,
Oceania: 2
}),
new ContinentsBirthRateItem(
{
Year: `1970`,
Asia: 80,
Africa: 17,
Europe: 11,
NorthAmerica: 3,
SouthAmerica: 9,
Oceania: 1
}),
new ContinentsBirthRateItem(
{
Year: `1980`,
Asia: 77,
Africa: 21,
Europe: 12,
NorthAmerica: 3,
SouthAmerica: 10,
Oceania: 2
}),
new ContinentsBirthRateItem(
{
Year: `1990`,
Asia: 87,
Africa: 24,
Europe: 9,
NorthAmerica: 3,
SouthAmerica: 10,
Oceania: 1
}),
new ContinentsBirthRateItem(
{
Year: `2000`,
Asia: 79,
Africa: 28,
Europe: 8,
NorthAmerica: 4,
SouthAmerica: 9,
Oceania: 3
}),
new ContinentsBirthRateItem(
{
Year: `2010`,
Asia: 78,
Africa: 35,
Europe: 10,
NorthAmerica: 4,
SouthAmerica: 8,
Oceania: 2
}),
new ContinentsBirthRateItem(
{
Year: `2020`,
Asia: 75,
Africa: 43,
Europe: 7,
NorthAmerica: 4,
SouthAmerica: 7,
Oceania: 4
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartCategoryCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule, IgcDataChartStackedModule, IgcStackedFragmentSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcStacked100AreaSeriesComponent, IgcStackedFragmentSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
import { ContinentsBirthRateItem, ContinentsBirthRate } from './ContinentsBirthRate';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcLegendModule,
IgcDataChartCoreModule,
IgcDataChartCategoryModule,
IgcDataChartCategoryCoreModule,
IgcDataChartInteractivityModule,
IgcDataChartAnnotationModule,
IgcDataChartStackedModule,
IgcStackedFragmentSeriesModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcDataChartComponent
private xAxis: IgcCategoryXAxisComponent
private yAxis: IgcNumericYAxisComponent
private stacked100AreaSeries: IgcStacked100AreaSeriesComponent
private s1: IgcStackedFragmentSeriesComponent
private s2: IgcStackedFragmentSeriesComponent
private s3: IgcStackedFragmentSeriesComponent
private s4: IgcStackedFragmentSeriesComponent
private s5: IgcStackedFragmentSeriesComponent
private dataToolTipLayer: IgcDataToolTipLayerComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent;
var xAxis = this.xAxis = document.getElementById('xAxis') as IgcCategoryXAxisComponent;
var yAxis = this.yAxis = document.getElementById('yAxis') as IgcNumericYAxisComponent;
var stacked100AreaSeries = this.stacked100AreaSeries = document.getElementById('stacked100AreaSeries') as IgcStacked100AreaSeriesComponent;
var s1 = this.s1 = document.getElementById('s1') as IgcStackedFragmentSeriesComponent;
var s2 = this.s2 = document.getElementById('s2') as IgcStackedFragmentSeriesComponent;
var s3 = this.s3 = document.getElementById('s3') as IgcStackedFragmentSeriesComponent;
var s4 = this.s4 = document.getElementById('s4') as IgcStackedFragmentSeriesComponent;
var s5 = this.s5 = document.getElementById('s5') as IgcStackedFragmentSeriesComponent;
var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('dataToolTipLayer') as IgcDataToolTipLayerComponent;
this._bind = () => {
chart.legend = this.legend;
xAxis.dataSource = this.continentsBirthRate;
stacked100AreaSeries.dataSource = this.continentsBirthRate;
stacked100AreaSeries.xAxis = this.xAxis;
stacked100AreaSeries.yAxis = this.yAxis;
}
this._bind();
}
private _continentsBirthRate: ContinentsBirthRate = null;
public get continentsBirthRate(): ContinentsBirthRate {
if (this._continentsBirthRate == null)
{
this._continentsBirthRate = new ContinentsBirthRate();
}
return this._continentsBirthRate;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="legend-title">
Annual Birth Rates by World Region
</div>
<div class="legend">
<igc-legend
name="legend"
id="legend"
orientation="Horizontal">
</igc-legend>
</div>
<div class="container fill">
<igc-data-chart
name="chart"
id="chart"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false">
<igc-category-x-axis
name="xAxis"
id="xAxis"
label="Year">
</igc-category-x-axis>
<igc-numeric-y-axis
name="yAxis"
id="yAxis"
interval="20"
title="Millions of Births"
title-angle="-90"
label-format="{0}%">
</igc-numeric-y-axis>
<igc-stacked-100-area-series
name="stacked100AreaSeries"
id="stacked100AreaSeries"
show-default-tooltip="false"
marker-type="Circle">
<igc-stacked-fragment-series
name="s1"
id="s1"
value-member-path="Asia"
title="Asia">
</igc-stacked-fragment-series>
<igc-stacked-fragment-series
name="s2"
id="s2"
value-member-path="Africa"
title="Africa">
</igc-stacked-fragment-series>
<igc-stacked-fragment-series
name="s3"
id="s3"
value-member-path="Europe"
title="Europe">
</igc-stacked-fragment-series>
<igc-stacked-fragment-series
name="s4"
id="s4"
value-member-path="NorthAmerica"
title="North America">
</igc-stacked-fragment-series>
<igc-stacked-fragment-series
name="s5"
id="s5"
value-member-path="SouthAmerica"
title="South America">
</igc-stacked-fragment-series>
</igc-stacked-100-area-series>
<igc-data-tool-tip-layer
name="dataToolTipLayer"
id="dataToolTipLayer">
</igc-data-tool-tip-layer>
</igc-data-chart>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
Web Components Stacked Spline Area Chart
The Web Components Stacked Spline Area Chart is rendered using a collection of points connected by curved spline segments, with the area below the curved spline fill in and stacked on top of each other. Stacked Spline Area Chart follows all of the same requirements as area charts, with the only difference being that the visually shaded areas are stacked on top of each other. You can create this type of chart in IgcDataChartComponent control by binding your data to IgcStackedSplineAreaSeriesComponent, as shown in the example below.
export class ContinentsBirthRateItem {
public constructor(init: Partial<ContinentsBirthRateItem>) {
Object.assign(this, init);
}
public Year: string;
public Asia: number;
public Africa: number;
public Europe: number;
public NorthAmerica: number;
public SouthAmerica: number;
public Oceania: number;
}
export class ContinentsBirthRate extends Array<ContinentsBirthRateItem> {
public constructor(items: Array<ContinentsBirthRateItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new ContinentsBirthRateItem(
{
Year: `1950`,
Asia: 62,
Africa: 13,
Europe: 10,
NorthAmerica: 4,
SouthAmerica: 8,
Oceania: 1
}),
new ContinentsBirthRateItem(
{
Year: `1960`,
Asia: 68,
Africa: 12,
Europe: 15,
NorthAmerica: 4,
SouthAmerica: 9,
Oceania: 2
}),
new ContinentsBirthRateItem(
{
Year: `1970`,
Asia: 80,
Africa: 17,
Europe: 11,
NorthAmerica: 3,
SouthAmerica: 9,
Oceania: 1
}),
new ContinentsBirthRateItem(
{
Year: `1980`,
Asia: 77,
Africa: 21,
Europe: 12,
NorthAmerica: 3,
SouthAmerica: 10,
Oceania: 2
}),
new ContinentsBirthRateItem(
{
Year: `1990`,
Asia: 87,
Africa: 24,
Europe: 9,
NorthAmerica: 3,
SouthAmerica: 10,
Oceania: 1
}),
new ContinentsBirthRateItem(
{
Year: `2000`,
Asia: 79,
Africa: 28,
Europe: 8,
NorthAmerica: 4,
SouthAmerica: 9,
Oceania: 3
}),
new ContinentsBirthRateItem(
{
Year: `2010`,
Asia: 78,
Africa: 35,
Europe: 10,
NorthAmerica: 4,
SouthAmerica: 8,
Oceania: 2
}),
new ContinentsBirthRateItem(
{
Year: `2020`,
Asia: 75,
Africa: 43,
Europe: 7,
NorthAmerica: 4,
SouthAmerica: 7,
Oceania: 4
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartCategoryCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule, IgcDataChartStackedModule, IgcStackedFragmentSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcStackedSplineAreaSeriesComponent, IgcStackedFragmentSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
import { ContinentsBirthRateItem, ContinentsBirthRate } from './ContinentsBirthRate';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcLegendModule,
IgcDataChartCoreModule,
IgcDataChartCategoryModule,
IgcDataChartCategoryCoreModule,
IgcDataChartInteractivityModule,
IgcDataChartAnnotationModule,
IgcDataChartStackedModule,
IgcStackedFragmentSeriesModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcDataChartComponent
private xAxis: IgcCategoryXAxisComponent
private yAxis: IgcNumericYAxisComponent
private stackedSplineAreaSeries: IgcStackedSplineAreaSeriesComponent
private s1: IgcStackedFragmentSeriesComponent
private s2: IgcStackedFragmentSeriesComponent
private s3: IgcStackedFragmentSeriesComponent
private s4: IgcStackedFragmentSeriesComponent
private s5: IgcStackedFragmentSeriesComponent
private dataToolTipLayer: IgcDataToolTipLayerComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent;
var xAxis = this.xAxis = document.getElementById('xAxis') as IgcCategoryXAxisComponent;
var yAxis = this.yAxis = document.getElementById('yAxis') as IgcNumericYAxisComponent;
var stackedSplineAreaSeries = this.stackedSplineAreaSeries = document.getElementById('stackedSplineAreaSeries') as IgcStackedSplineAreaSeriesComponent;
var s1 = this.s1 = document.getElementById('s1') as IgcStackedFragmentSeriesComponent;
var s2 = this.s2 = document.getElementById('s2') as IgcStackedFragmentSeriesComponent;
var s3 = this.s3 = document.getElementById('s3') as IgcStackedFragmentSeriesComponent;
var s4 = this.s4 = document.getElementById('s4') as IgcStackedFragmentSeriesComponent;
var s5 = this.s5 = document.getElementById('s5') as IgcStackedFragmentSeriesComponent;
var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('dataToolTipLayer') as IgcDataToolTipLayerComponent;
this._bind = () => {
chart.legend = this.legend;
xAxis.dataSource = this.continentsBirthRate;
stackedSplineAreaSeries.dataSource = this.continentsBirthRate;
stackedSplineAreaSeries.xAxis = this.xAxis;
stackedSplineAreaSeries.yAxis = this.yAxis;
}
this._bind();
}
private _continentsBirthRate: ContinentsBirthRate = null;
public get continentsBirthRate(): ContinentsBirthRate {
if (this._continentsBirthRate == null)
{
this._continentsBirthRate = new ContinentsBirthRate();
}
return this._continentsBirthRate;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="legend-title">
Annual Birth Rates by World Region
</div>
<div class="legend">
<igc-legend
name="legend"
id="legend"
orientation="Horizontal">
</igc-legend>
</div>
<div class="container fill">
<igc-data-chart
name="chart"
id="chart"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false">
<igc-category-x-axis
name="xAxis"
id="xAxis"
label="Year"
gap="0.75">
</igc-category-x-axis>
<igc-numeric-y-axis
name="yAxis"
id="yAxis"
minimum-value="0"
maximum-value="140"
interval="20"
title="Millions of Births"
title-angle="-90"
label-format="{0} m">
</igc-numeric-y-axis>
<igc-stacked-spline-area-series
name="stackedSplineAreaSeries"
id="stackedSplineAreaSeries"
show-default-tooltip="false"
marker-type="Circle">
<igc-stacked-fragment-series
name="s1"
id="s1"
value-member-path="Asia"
title="Asia">
</igc-stacked-fragment-series>
<igc-stacked-fragment-series
name="s2"
id="s2"
value-member-path="Africa"
title="Africa">
</igc-stacked-fragment-series>
<igc-stacked-fragment-series
name="s3"
id="s3"
value-member-path="Europe"
title="Europe">
</igc-stacked-fragment-series>
<igc-stacked-fragment-series
name="s4"
id="s4"
value-member-path="NorthAmerica"
title="North America">
</igc-stacked-fragment-series>
<igc-stacked-fragment-series
name="s5"
id="s5"
value-member-path="SouthAmerica"
title="South America">
</igc-stacked-fragment-series>
</igc-stacked-spline-area-series>
<igc-data-tool-tip-layer
name="dataToolTipLayer"
id="dataToolTipLayer">
</igc-data-tool-tip-layer>
</igc-data-chart>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
Web Components Stacked 100% Spline Area Chart
The Web Components Stacked 100% Spline Area Chart is identical to the Stacked Spline Area Chart in all aspects except for the treatment of the values on the y-axis. Instead of presenting a direct representation of the data, the Stacked 100% Spline Area Chart presents the data in terms of a percent of the sum of all values in a particular data point. Sometimes the chart represents part of a whole being changed over time. For example, a country's energy consumption related to the sources from which it is produced. In such cases, representing all stacked elements equally may be a better idea. You can create this type of chart in IgcDataChartComponent control by binding your data to IgcStacked100SplineAreaSeriesComponent, as shown in the example below.
export class ContinentsBirthRateItem {
public constructor(init: Partial<ContinentsBirthRateItem>) {
Object.assign(this, init);
}
public Year: string;
public Asia: number;
public Africa: number;
public Europe: number;
public NorthAmerica: number;
public SouthAmerica: number;
public Oceania: number;
}
export class ContinentsBirthRate extends Array<ContinentsBirthRateItem> {
public constructor(items: Array<ContinentsBirthRateItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new ContinentsBirthRateItem(
{
Year: `1950`,
Asia: 62,
Africa: 13,
Europe: 10,
NorthAmerica: 4,
SouthAmerica: 8,
Oceania: 1
}),
new ContinentsBirthRateItem(
{
Year: `1960`,
Asia: 68,
Africa: 12,
Europe: 15,
NorthAmerica: 4,
SouthAmerica: 9,
Oceania: 2
}),
new ContinentsBirthRateItem(
{
Year: `1970`,
Asia: 80,
Africa: 17,
Europe: 11,
NorthAmerica: 3,
SouthAmerica: 9,
Oceania: 1
}),
new ContinentsBirthRateItem(
{
Year: `1980`,
Asia: 77,
Africa: 21,
Europe: 12,
NorthAmerica: 3,
SouthAmerica: 10,
Oceania: 2
}),
new ContinentsBirthRateItem(
{
Year: `1990`,
Asia: 87,
Africa: 24,
Europe: 9,
NorthAmerica: 3,
SouthAmerica: 10,
Oceania: 1
}),
new ContinentsBirthRateItem(
{
Year: `2000`,
Asia: 79,
Africa: 28,
Europe: 8,
NorthAmerica: 4,
SouthAmerica: 9,
Oceania: 3
}),
new ContinentsBirthRateItem(
{
Year: `2010`,
Asia: 78,
Africa: 35,
Europe: 10,
NorthAmerica: 4,
SouthAmerica: 8,
Oceania: 2
}),
new ContinentsBirthRateItem(
{
Year: `2020`,
Asia: 75,
Africa: 43,
Europe: 7,
NorthAmerica: 4,
SouthAmerica: 7,
Oceania: 4
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartCategoryCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule, IgcDataChartStackedModule, IgcStackedFragmentSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcStacked100SplineAreaSeriesComponent, IgcStackedFragmentSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
import { ContinentsBirthRateItem, ContinentsBirthRate } from './ContinentsBirthRate';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcLegendModule,
IgcDataChartCoreModule,
IgcDataChartCategoryModule,
IgcDataChartCategoryCoreModule,
IgcDataChartInteractivityModule,
IgcDataChartAnnotationModule,
IgcDataChartStackedModule,
IgcStackedFragmentSeriesModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcDataChartComponent
private xAxis: IgcCategoryXAxisComponent
private yAxis: IgcNumericYAxisComponent
private stacked100SplineAreaSeries: IgcStacked100SplineAreaSeriesComponent
private s1: IgcStackedFragmentSeriesComponent
private s2: IgcStackedFragmentSeriesComponent
private s3: IgcStackedFragmentSeriesComponent
private s4: IgcStackedFragmentSeriesComponent
private s5: IgcStackedFragmentSeriesComponent
private dataToolTipLayer: IgcDataToolTipLayerComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent;
var xAxis = this.xAxis = document.getElementById('xAxis') as IgcCategoryXAxisComponent;
var yAxis = this.yAxis = document.getElementById('yAxis') as IgcNumericYAxisComponent;
var stacked100SplineAreaSeries = this.stacked100SplineAreaSeries = document.getElementById('stacked100SplineAreaSeries') as IgcStacked100SplineAreaSeriesComponent;
var s1 = this.s1 = document.getElementById('s1') as IgcStackedFragmentSeriesComponent;
var s2 = this.s2 = document.getElementById('s2') as IgcStackedFragmentSeriesComponent;
var s3 = this.s3 = document.getElementById('s3') as IgcStackedFragmentSeriesComponent;
var s4 = this.s4 = document.getElementById('s4') as IgcStackedFragmentSeriesComponent;
var s5 = this.s5 = document.getElementById('s5') as IgcStackedFragmentSeriesComponent;
var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('dataToolTipLayer') as IgcDataToolTipLayerComponent;
this._bind = () => {
chart.legend = this.legend;
xAxis.dataSource = this.continentsBirthRate;
stacked100SplineAreaSeries.dataSource = this.continentsBirthRate;
stacked100SplineAreaSeries.xAxis = this.xAxis;
stacked100SplineAreaSeries.yAxis = this.yAxis;
}
this._bind();
}
private _continentsBirthRate: ContinentsBirthRate = null;
public get continentsBirthRate(): ContinentsBirthRate {
if (this._continentsBirthRate == null)
{
this._continentsBirthRate = new ContinentsBirthRate();
}
return this._continentsBirthRate;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="legend-title">
Annual Birth Rates by World Region
</div>
<div class="legend">
<igc-legend
name="legend"
id="legend"
orientation="Horizontal">
</igc-legend>
</div>
<div class="container fill">
<igc-data-chart
name="chart"
id="chart"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false">
<igc-category-x-axis
name="xAxis"
id="xAxis"
label="Year">
</igc-category-x-axis>
<igc-numeric-y-axis
name="yAxis"
id="yAxis"
interval="20"
title-left-margin="10"
label-format="{0}%">
</igc-numeric-y-axis>
<igc-stacked-100-spline-area-series
name="stacked100SplineAreaSeries"
id="stacked100SplineAreaSeries"
show-default-tooltip="false"
marker-type="Circle">
<igc-stacked-fragment-series
name="s1"
id="s1"
value-member-path="Asia"
title="Asia">
</igc-stacked-fragment-series>
<igc-stacked-fragment-series
name="s2"
id="s2"
value-member-path="Africa"
title="Africa">
</igc-stacked-fragment-series>
<igc-stacked-fragment-series
name="s3"
id="s3"
value-member-path="Europe"
title="Europe">
</igc-stacked-fragment-series>
<igc-stacked-fragment-series
name="s4"
id="s4"
value-member-path="NorthAmerica"
title="North America">
</igc-stacked-fragment-series>
<igc-stacked-fragment-series
name="s5"
id="s5"
value-member-path="SouthAmerica"
title="South America">
</igc-stacked-fragment-series>
</igc-stacked-100-spline-area-series>
<igc-data-tool-tip-layer
name="dataToolTipLayer"
id="dataToolTipLayer">
</igc-data-tool-tip-layer>
</igc-data-chart>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
Web Components Radial Area Chart
The Web Components Radial Area Chart belongs to a group of Radial Chart and has a shape of a filled polygon that is bound by a collection of straight lines connecting data points. This chart type uses the same concept of data plotting as the Area Chart, but wraps the data points around a circular axis rather than stretching them horizontally. You can create this type of chart in IgcDataChartComponent control by binding your data to IgcRadialAreaSeriesComponent, as shown in the example below.
export class FootballPlayerStatsItem {
public constructor(init: Partial<FootballPlayerStatsItem>) {
Object.assign(this, init);
}
public attribute: string;
public ronaldo: number;
public messi: number;
}
export class FootballPlayerStats extends Array<FootballPlayerStatsItem> {
public constructor(items: Array<FootballPlayerStatsItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new FootballPlayerStatsItem(
{
attribute: `Dribbling`,
ronaldo: 8,
messi: 10
}),
new FootballPlayerStatsItem(
{
attribute: `Passing`,
ronaldo: 8,
messi: 10
}),
new FootballPlayerStatsItem(
{
attribute: `Finishing`,
ronaldo: 10,
messi: 10
}),
new FootballPlayerStatsItem(
{
attribute: `Free Kicks`,
ronaldo: 8,
messi: 9
}),
new FootballPlayerStatsItem(
{
attribute: `Penalties`,
ronaldo: 9,
messi: 7
}),
new FootballPlayerStatsItem(
{
attribute: `Physical`,
ronaldo: 10,
messi: 7
}),
new FootballPlayerStatsItem(
{
attribute: `Team Play`,
ronaldo: 7,
messi: 9
}),
new FootballPlayerStatsItem(
{
attribute: `Heading`,
ronaldo: 9,
messi: 6
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartRadialModule, IgcDataChartRadialCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryAngleAxisComponent, IgcNumericRadiusAxisComponent, IgcRadialAreaSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
import { FootballPlayerStatsItem, FootballPlayerStats } from './FootballPlayerStats';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcLegendModule,
IgcDataChartCoreModule,
IgcDataChartRadialModule,
IgcDataChartRadialCoreModule,
IgcDataChartInteractivityModule,
IgcDataChartAnnotationModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcDataChartComponent
private angleAxis: IgcCategoryAngleAxisComponent
private radiusAxis: IgcNumericRadiusAxisComponent
private radialAreaSeries1: IgcRadialAreaSeriesComponent
private radialAreaSeries2: IgcRadialAreaSeriesComponent
private dataToolTipLayer: IgcDataToolTipLayerComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent;
var angleAxis = this.angleAxis = document.getElementById('angleAxis') as IgcCategoryAngleAxisComponent;
var radiusAxis = this.radiusAxis = document.getElementById('radiusAxis') as IgcNumericRadiusAxisComponent;
var radialAreaSeries1 = this.radialAreaSeries1 = document.getElementById('RadialAreaSeries1') as IgcRadialAreaSeriesComponent;
var radialAreaSeries2 = this.radialAreaSeries2 = document.getElementById('RadialAreaSeries2') as IgcRadialAreaSeriesComponent;
var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('dataToolTipLayer') as IgcDataToolTipLayerComponent;
this._bind = () => {
chart.legend = this.legend;
angleAxis.dataSource = this.footballPlayerStats;
radialAreaSeries1.dataSource = this.footballPlayerStats;
radialAreaSeries1.angleAxis = this.angleAxis;
radialAreaSeries1.valueAxis = this.radiusAxis;
radialAreaSeries2.dataSource = this.footballPlayerStats;
radialAreaSeries2.angleAxis = this.angleAxis;
radialAreaSeries2.valueAxis = this.radiusAxis;
}
this._bind();
}
private _footballPlayerStats: FootballPlayerStats = null;
public get footballPlayerStats(): FootballPlayerStats {
if (this._footballPlayerStats == null)
{
this._footballPlayerStats = new FootballPlayerStats();
}
return this._footballPlayerStats;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="legend-title">
Ronaldo vs Messi Player Stats
</div>
<div class="legend">
<igc-legend
name="legend"
id="legend"
orientation="Horizontal">
</igc-legend>
</div>
<div class="container fill">
<igc-data-chart
name="chart"
id="chart"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false">
<igc-category-angle-axis
name="angleAxis"
id="angleAxis"
label="attribute">
</igc-category-angle-axis>
<igc-numeric-radius-axis
name="radiusAxis"
id="radiusAxis"
inner-radius-extent-scale="0.1"
interval="2"
minimum-value="0"
maximum-value="10">
</igc-numeric-radius-axis>
<igc-radial-area-series
name="RadialAreaSeries1"
id="RadialAreaSeries1"
value-member-path="ronaldo"
show-default-tooltip="false"
area-fill-opacity="0.5"
thickness="3"
title="Ronaldo"
marker-type="Circle">
</igc-radial-area-series>
<igc-radial-area-series
name="RadialAreaSeries2"
id="RadialAreaSeries2"
value-member-path="messi"
show-default-tooltip="false"
area-fill-opacity="0.5"
thickness="3"
title="Messi"
marker-type="Circle">
</igc-radial-area-series>
<igc-data-tool-tip-layer
name="dataToolTipLayer"
id="dataToolTipLayer">
</igc-data-tool-tip-layer>
</igc-data-chart>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
Web Components Polar Area Chart
The Web Components Polar Area Chart belongs to a group of Polar Chart and have a shape of a filled polygon, where vertices or corners are located at the polar (angle/radius) coordinates of data points and are connected by a straight line and then filling the area represented by the connected points. The Polar Area Chart uses the same concepts of data plotting as the Scatter Marker Chart, but instead wraps the points around a circle and fills in the area that is drawn, rather than stretching the points and area filled along a horizontal line. You can create this type of chart in IgcDataChartComponent control by binding your data to IgcPolarAreaSeriesComponent, as shown in the example below.
export class BoatSailingDataItem {
public constructor(init: Partial<BoatSailingDataItem>) {
Object.assign(this, init);
}
public direction: number;
public boatSpeed: number;
public windSpeed: number;
}
export class BoatSailingData extends Array<BoatSailingDataItem> {
public constructor(items: Array<BoatSailingDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new BoatSailingDataItem(
{
direction: 0,
boatSpeed: 70,
windSpeed: 90
}),
new BoatSailingDataItem(
{
direction: 45,
boatSpeed: 35,
windSpeed: 65
}),
new BoatSailingDataItem(
{
direction: 90,
boatSpeed: 25,
windSpeed: 45
}),
new BoatSailingDataItem(
{
direction: 135,
boatSpeed: 15,
windSpeed: 25
}),
new BoatSailingDataItem(
{
direction: 180,
boatSpeed: 0,
windSpeed: 0
}),
new BoatSailingDataItem(
{
direction: 225,
boatSpeed: 15,
windSpeed: 25
}),
new BoatSailingDataItem(
{
direction: 270,
boatSpeed: 25,
windSpeed: 45
}),
new BoatSailingDataItem(
{
direction: 315,
boatSpeed: 35,
windSpeed: 65
}),
new BoatSailingDataItem(
{
direction: 360,
boatSpeed: 70,
windSpeed: 90
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartPolarModule, IgcDataChartPolarCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcNumericAngleAxisComponent, IgcNumericRadiusAxisComponent, IgcPolarAreaSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
import { BoatSailingDataItem, BoatSailingData } from './BoatSailingData';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcLegendModule,
IgcDataChartCoreModule,
IgcDataChartPolarModule,
IgcDataChartPolarCoreModule,
IgcDataChartInteractivityModule,
IgcDataChartAnnotationModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcDataChartComponent
private angleAxis: IgcNumericAngleAxisComponent
private radiusAxis: IgcNumericRadiusAxisComponent
private polarAreaSeries1: IgcPolarAreaSeriesComponent
private polarAreaSeries2: IgcPolarAreaSeriesComponent
private dataToolTipLayer: IgcDataToolTipLayerComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent;
var angleAxis = this.angleAxis = document.getElementById('angleAxis') as IgcNumericAngleAxisComponent;
var radiusAxis = this.radiusAxis = document.getElementById('radiusAxis') as IgcNumericRadiusAxisComponent;
var polarAreaSeries1 = this.polarAreaSeries1 = document.getElementById('PolarAreaSeries1') as IgcPolarAreaSeriesComponent;
var polarAreaSeries2 = this.polarAreaSeries2 = document.getElementById('PolarAreaSeries2') as IgcPolarAreaSeriesComponent;
var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('dataToolTipLayer') as IgcDataToolTipLayerComponent;
this._bind = () => {
chart.legend = this.legend;
polarAreaSeries1.dataSource = this.boatSailingData;
polarAreaSeries1.angleAxis = this.angleAxis;
polarAreaSeries1.radiusAxis = this.radiusAxis;
polarAreaSeries2.dataSource = this.boatSailingData;
polarAreaSeries2.angleAxis = this.angleAxis;
polarAreaSeries2.radiusAxis = this.radiusAxis;
}
this._bind();
}
private _boatSailingData: BoatSailingData = null;
public get boatSailingData(): BoatSailingData {
if (this._boatSailingData == null)
{
this._boatSailingData = new BoatSailingData();
}
return this._boatSailingData;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="legend-title">
Wind Speed vs Boat Speed
</div>
<div class="legend">
<igc-legend
name="legend"
id="legend"
orientation="Horizontal">
</igc-legend>
</div>
<div class="container fill">
<igc-data-chart
name="chart"
id="chart"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false">
<igc-numeric-angle-axis
name="angleAxis"
id="angleAxis"
start-angle-offset="-90"
interval="30"
minimum-value="0"
maximum-value="360">
</igc-numeric-angle-axis>
<igc-numeric-radius-axis
name="radiusAxis"
id="radiusAxis"
radius-extent-scale="0.9"
inner-radius-extent-scale="0.1"
interval="25"
minimum-value="0"
maximum-value="100">
</igc-numeric-radius-axis>
<igc-polar-area-series
name="PolarAreaSeries1"
id="PolarAreaSeries1"
angle-member-path="direction"
radius-member-path="windSpeed"
show-default-tooltip="false"
area-fill-opacity="0.8"
thickness="1"
title="Wind Speed"
marker-type="Circle">
</igc-polar-area-series>
<igc-polar-area-series
name="PolarAreaSeries2"
id="PolarAreaSeries2"
angle-member-path="direction"
radius-member-path="boatSpeed"
show-default-tooltip="false"
area-fill-opacity="0.8"
thickness="1"
title="Boat Speed"
marker-type="Circle">
</igc-polar-area-series>
<igc-data-tool-tip-layer
name="dataToolTipLayer"
id="dataToolTipLayer">
</igc-data-tool-tip-layer>
</igc-data-chart>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
Web Components Polar Spline Area Chart
The Web Components Polar Spline Area Chart belongs to a group of Polar Chart and have a shape of a filled polygon, where vertices or corners are located at the polar (angle/radius) coordinates of data points and are connected by a curved spline and then filling the area represented by the connected points. The Polar Spline Area Chart uses the same concepts of data plotting as the Scatter Marker Chart, but instead wraps the points around a circle and fills in the area that is drawn, rather than stretching the points and area filled along a horizontal line. You can create this type of chart in IgcDataChartComponent control by binding your data to IgcPolarSplineAreaSeriesComponent, as shown in the example below.
export class BoatSailingDataItem {
public constructor(init: Partial<BoatSailingDataItem>) {
Object.assign(this, init);
}
public direction: number;
public boatSpeed: number;
public windSpeed: number;
}
export class BoatSailingData extends Array<BoatSailingDataItem> {
public constructor(items: Array<BoatSailingDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new BoatSailingDataItem(
{
direction: 0,
boatSpeed: 70,
windSpeed: 90
}),
new BoatSailingDataItem(
{
direction: 45,
boatSpeed: 35,
windSpeed: 65
}),
new BoatSailingDataItem(
{
direction: 90,
boatSpeed: 25,
windSpeed: 45
}),
new BoatSailingDataItem(
{
direction: 135,
boatSpeed: 15,
windSpeed: 25
}),
new BoatSailingDataItem(
{
direction: 180,
boatSpeed: 0,
windSpeed: 0
}),
new BoatSailingDataItem(
{
direction: 225,
boatSpeed: 15,
windSpeed: 25
}),
new BoatSailingDataItem(
{
direction: 270,
boatSpeed: 25,
windSpeed: 45
}),
new BoatSailingDataItem(
{
direction: 315,
boatSpeed: 35,
windSpeed: 65
}),
new BoatSailingDataItem(
{
direction: 360,
boatSpeed: 70,
windSpeed: 90
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcDataChartCoreModule, IgcDataChartPolarModule, IgcDataChartPolarCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartComponent, IgcNumericAngleAxisComponent, IgcNumericRadiusAxisComponent, IgcPolarSplineAreaSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
import { BoatSailingDataItem, BoatSailingData } from './BoatSailingData';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcDataChartCoreModule,
IgcDataChartPolarModule,
IgcDataChartPolarCoreModule,
IgcDataChartInteractivityModule,
IgcDataChartAnnotationModule
);
export class Sample {
private chart: IgcDataChartComponent
private angleAxis: IgcNumericAngleAxisComponent
private radiusAxis: IgcNumericRadiusAxisComponent
private polarSplineAreaSeries1: IgcPolarSplineAreaSeriesComponent
private polarSplineAreaSeries2: IgcPolarSplineAreaSeriesComponent
private dataToolTipLayer: IgcDataToolTipLayerComponent
private _bind: () => void;
constructor() {
var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent;
var angleAxis = this.angleAxis = document.getElementById('angleAxis') as IgcNumericAngleAxisComponent;
var radiusAxis = this.radiusAxis = document.getElementById('radiusAxis') as IgcNumericRadiusAxisComponent;
var polarSplineAreaSeries1 = this.polarSplineAreaSeries1 = document.getElementById('PolarSplineAreaSeries1') as IgcPolarSplineAreaSeriesComponent;
var polarSplineAreaSeries2 = this.polarSplineAreaSeries2 = document.getElementById('PolarSplineAreaSeries2') as IgcPolarSplineAreaSeriesComponent;
var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('dataToolTipLayer') as IgcDataToolTipLayerComponent;
this._bind = () => {
polarSplineAreaSeries1.dataSource = this.boatSailingData;
polarSplineAreaSeries1.angleAxis = this.angleAxis;
polarSplineAreaSeries1.radiusAxis = this.radiusAxis;
polarSplineAreaSeries2.dataSource = this.boatSailingData;
polarSplineAreaSeries2.angleAxis = this.angleAxis;
polarSplineAreaSeries2.radiusAxis = this.radiusAxis;
}
this._bind();
}
private _boatSailingData: BoatSailingData = null;
public get boatSailingData(): BoatSailingData {
if (this._boatSailingData == null)
{
this._boatSailingData = new BoatSailingData();
}
return this._boatSailingData;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="legend-title">
Wind Speed vs Boat Speed
</div>
<div class="container fill">
<igc-data-chart
name="chart"
id="chart"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false">
<igc-numeric-angle-axis
name="angleAxis"
id="angleAxis"
start-angle-offset="-90"
interval="30"
minimum-value="0"
maximum-value="360">
</igc-numeric-angle-axis>
<igc-numeric-radius-axis
name="radiusAxis"
id="radiusAxis"
radius-extent-scale="0.9"
inner-radius-extent-scale="0.1"
interval="25"
minimum-value="0"
maximum-value="100">
</igc-numeric-radius-axis>
<igc-polar-spline-area-series
name="PolarSplineAreaSeries1"
id="PolarSplineAreaSeries1"
angle-member-path="direction"
radius-member-path="windSpeed"
show-default-tooltip="false"
area-fill-opacity="0.8"
thickness="1"
title="Wind Speed"
marker-type="Circle">
</igc-polar-spline-area-series>
<igc-polar-spline-area-series
name="PolarSplineAreaSeries2"
id="PolarSplineAreaSeries2"
angle-member-path="direction"
radius-member-path="boatSpeed"
show-default-tooltip="false"
area-fill-opacity="0.8"
thickness="1"
title="Boat Speed"
marker-type="Circle">
</igc-polar-spline-area-series>
<igc-data-tool-tip-layer
name="dataToolTipLayer"
id="dataToolTipLayer">
</igc-data-tool-tip-layer>
</igc-data-chart>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
Additional Resources
You can find more information about related chart types in these topics:
API References
The following table lists API members mentioned in above sections:
| Chart Type | Control Name | API Members |
|---|---|---|
| Area | IgcCategoryChartComponent |
chartType = Area |
| Step Area | IgcCategoryChartComponent |
chartType = StepArea |
| Range Area | IgcDataChartComponent |
IgcRangeAreaSeriesComponent |
| Radial Area | IgcDataChartComponent |
IgcRadialAreaSeriesComponent |
| Polar Area | IgcDataChartComponent |
IgcPolarAreaSeriesComponent |
| Polar Spline Area | IgcDataChartComponent |
IgcPolarSplineAreaSeriesComponent |
| Stacked Area | IgcDataChartComponent |
IgcStackedAreaSeriesComponent |
| Stacked Spline Area | IgcDataChartComponent |
IgcStackedSplineAreaSeriesComponent |
| Stacked 100% Area | IgcDataChartComponent |
IgcStacked100AreaSeriesComponent |
| Stacked 100% Spline Area | IgcDataChartComponent |
IgcStacked100SplineAreaSeriesComponent |