Web Components Stacked Chart
The Ignite UI for Web Components Stacked Chart belongs to a special group of charts that render multiple values of data items as stacked area/polygons, bars, columns, lines, or splines. Standard Stacked Charts render actual values of data items while Stacked 100% Charts render values as percentage of total values.
Web Components Stacked Chart Types
The following example, you can use the drop-down to switch between all of the different types stacked charts available in the Web Components IgcDataChartComponent
control.
import { IgcDataChartComponent } from 'igniteui-webcomponents-charts';
import { IgcDataChartCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartCategoryModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartStackedModule } from 'igniteui-webcomponents-charts';
// import { IgcColumnFragmentModule } from 'igniteui-webcomponents-charts';
import { IgcStackedFragmentSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcStackedFragmentSeriesComponent } from 'igniteui-webcomponents-charts';
// stacked-value series modules:
import { IgcStackedAreaSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcStackedAreaSeriesComponent } from 'igniteui-webcomponents-charts';
import { IgcStackedBarSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcStackedBarSeriesComponent } from 'igniteui-webcomponents-charts';
import { IgcStackedColumnSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcStackedColumnSeriesComponent } from 'igniteui-webcomponents-charts';
import { IgcStackedLineSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcStackedLineSeriesComponent } from 'igniteui-webcomponents-charts';
import { IgcStackedSplineSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcStackedSplineSeriesComponent } from 'igniteui-webcomponents-charts';
// stacked-100% series modules:
import { IgcStacked100AreaSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcStacked100AreaSeriesComponent } from 'igniteui-webcomponents-charts';
import { IgcStacked100BarSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcStacked100BarSeriesComponent } from 'igniteui-webcomponents-charts';
import { IgcStacked100ColumnSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcStacked100ColumnSeriesComponent } from 'igniteui-webcomponents-charts';
import { IgcStacked100LineSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcStacked100LineSeriesComponent } from 'igniteui-webcomponents-charts';
import { IgcStacked100SplineSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcStacked100SplineSeriesComponent } from 'igniteui-webcomponents-charts';
import { IgcCategoryXAxisModule } from 'igniteui-webcomponents-charts';
import { IgcCategoryXAxisComponent } from 'igniteui-webcomponents-charts';
import { IgcCategoryYAxisModule } from 'igniteui-webcomponents-charts';
import { IgcCategoryYAxisComponent } from 'igniteui-webcomponents-charts';
import { IgcNumericYAxisModule } from 'igniteui-webcomponents-charts';
import { IgcNumericYAxisComponent } from 'igniteui-webcomponents-charts';
import { IgcNumericXAxisModule } from 'igniteui-webcomponents-charts';
import { IgcNumericXAxisComponent } from 'igniteui-webcomponents-charts';
import { IgcLegendModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
ModuleManager.register(
IgcDataChartCoreModule,
IgcDataChartCategoryModule,
IgcDataChartStackedModule,
// IgcColumnFragmentModule,
IgcLegendModule,
IgcNumericYAxisModule,
IgcNumericXAxisModule,
IgcCategoryXAxisModule,
IgcCategoryYAxisModule,
IgcStackedFragmentSeriesModule,
// stacked-value series modules:
IgcStackedAreaSeriesModule,
IgcStackedBarSeriesModule,
IgcStackedColumnSeriesModule,
IgcStackedLineSeriesModule,
IgcStackedSplineSeriesModule,
// stacked-100% series modules:
IgcStacked100AreaSeriesModule,
IgcStacked100BarSeriesModule,
IgcStacked100ColumnSeriesModule,
IgcStacked100LineSeriesModule,
IgcStacked100SplineSeriesModule,
);
export class DataChartTypeStackedSeries {
private chart: IgcDataChartComponent;
private legend: IgcLegendComponent;
public catXAxis: IgcCategoryXAxisComponent;
public catYAxis: IgcCategoryYAxisComponent;
public numXAxis: IgcNumericXAxisComponent;
public numYAxis: IgcNumericYAxisComponent;
constructor() {
this.catXAxis = new IgcCategoryXAxisComponent();
this.catXAxis.name = 'catXAxis';
this.catXAxis.label = 'Country';
this.catYAxis = new IgcCategoryYAxisComponent();
this.catYAxis.name = 'catYAxis';
this.catYAxis.label = 'Country';
this.numXAxis = new IgcNumericXAxisComponent();
this.numXAxis.name = 'numXAxis';
this.numYAxis = new IgcNumericYAxisComponent();
this.numYAxis.name = 'numYAxis';
this.chart = document.getElementById('chart') as IgcDataChartComponent;
this.chart.dataSource = this.getData();
this.setSeries('Stacked Column Series');
this.legend = document.getElementById('legend') as IgcLegendComponent;
this.chart.legend = this.legend;
const seriesTypeSelect = document.getElementById('seriesTypeSelect') as HTMLSelectElement;
seriesTypeSelect.value = 'Stacked Column Series';
seriesTypeSelect!.addEventListener('change', this.onSeriesTypeChanged);
}
public getFragments(): IgcStackedFragmentSeriesComponent[] {
let fragments: IgcStackedFragmentSeriesComponent[];
fragments = [];
const fragment1 = new IgcStackedFragmentSeriesComponent();
fragment1.valueMemberPath = 'Coal';
fragment1.title = 'Coal';
const fragment2 = new IgcStackedFragmentSeriesComponent();
fragment2.valueMemberPath = 'Hydro';
fragment2.title = 'Hydro';
const fragment3 = new IgcStackedFragmentSeriesComponent();
fragment3.valueMemberPath = 'Nuclear';
fragment3.title = 'Nuclear';
const fragment4 = new IgcStackedFragmentSeriesComponent();
fragment4.valueMemberPath = 'Gas';
fragment4.title = 'Gas';
const fragment5 = new IgcStackedFragmentSeriesComponent();
fragment5.valueMemberPath = 'Oil';
fragment5.title = 'Oil';
fragments.push(fragment1);
fragments.push(fragment2);
fragments.push(fragment3);
fragments.push(fragment4);
fragments.push(fragment5);
return fragments;
}
public onSeriesTypeChanged = (e: any) => {
const selectedSeries = e.target.value.toString();
this.chart.series.clear();
this.setSeries(selectedSeries);
}
public setSeries(seriesType: string) {
this.chart.axes.clear();
this.chart.series.clear();
const fragments = this.getFragments();
if (seriesType === 'Stacked Column Series') {
const stack = new IgcStackedColumnSeriesComponent();
stack.xAxis = this.catXAxis;
stack.yAxis = this.numYAxis;
stack.yAxisName = 'numYAxis';
stack.xAxisName = 'catXAxis';
this.chart.axes.add(this.catXAxis);
this.chart.axes.add(this.numYAxis);
for (const frag of fragments) {
stack.series.add(frag);
}
this.chart.series.add(stack);
}
else if (seriesType === 'Stacked 100 Column Series') {
const stack = new IgcStacked100ColumnSeriesComponent();
stack.xAxis = this.catXAxis;
stack.yAxis = this.numYAxis;
stack.yAxisName = 'numYAxis';
stack.xAxisName = 'catXAxis';
this.chart.axes.add(this.catXAxis);
this.chart.axes.add(this.numYAxis);
for (const frag of fragments) {
stack.series.add(frag);
}
this.chart.series.add(stack);
}
else if (seriesType === 'Stacked Area Series') {
const stack = new IgcStackedAreaSeriesComponent();
stack.xAxis = this.catXAxis;
stack.yAxis = this.numYAxis;
stack.yAxisName = 'numYAxis';
stack.xAxisName = 'catXAxis';
this.chart.axes.add(this.catXAxis);
this.chart.axes.add(this.numYAxis);
for (const frag of fragments) {
stack.series.add(frag);
}
this.chart.series.add(stack);
}
else if (seriesType === 'Stacked 100 Area Series') {
const stack = new IgcStacked100AreaSeriesComponent();
stack.xAxis = this.catXAxis;
stack.yAxis = this.numYAxis;
stack.yAxisName = 'numYAxis';
stack.xAxisName = 'catXAxis';
this.chart.axes.add(this.catXAxis);
this.chart.axes.add(this.numYAxis);
for (const frag of fragments) {
stack.series.add(frag);
}
this.chart.series.add(stack);
}
else if (seriesType === 'Stacked Line Series') {
const stack = new IgcStackedLineSeriesComponent();
stack.xAxis = this.catXAxis;
stack.yAxis = this.numYAxis;
stack.yAxisName = 'numYAxis';
stack.xAxisName = 'catXAxis';
this.chart.axes.add(this.catXAxis);
this.chart.axes.add(this.numYAxis);
for (const frag of fragments) {
stack.series.add(frag);
}
this.chart.series.add(stack);
}
else if (seriesType === 'Stacked 100 Line Series') {
const stack = new IgcStacked100LineSeriesComponent();
stack.xAxis = this.catXAxis;
stack.yAxis = this.numYAxis;
stack.yAxisName = 'numYAxis';
stack.xAxisName = 'catXAxis';
this.chart.axes.add(this.catXAxis);
this.chart.axes.add(this.numYAxis);
for (const frag of fragments) {
stack.series.add(frag);
}
this.chart.series.add(stack);
}
else if (seriesType === 'Stacked Spline Series') {
const stack = new IgcStackedSplineSeriesComponent();
stack.xAxis = this.catXAxis;
stack.yAxis = this.numYAxis;
stack.yAxisName = 'numYAxis';
stack.xAxisName = 'catXAxis';
this.chart.axes.add(this.catXAxis);
this.chart.axes.add(this.numYAxis);
for (const frag of fragments) {
stack.series.add(frag);
}
this.chart.series.add(stack);
}
else if (seriesType === 'Stacked 100 Spline Series') {
const stack = new IgcStacked100SplineSeriesComponent();
stack.xAxis = this.catXAxis;
stack.yAxis = this.numYAxis;
stack.yAxisName = 'numYAxis';
stack.xAxisName = 'catXAxis';
this.chart.axes.add(this.catXAxis);
this.chart.axes.add(this.numYAxis);
for (const frag of fragments) {
stack.series.add(frag);
}
this.chart.series.add(stack);
}
else if (seriesType === 'Stacked Bar Series') {
const stack = new IgcStackedBarSeriesComponent();
stack.xAxis = this.numXAxis;
stack.yAxis = this.catYAxis;
stack.xAxisName = 'numXAxis';
stack.yAxisName = 'catYAxis';
this.chart.axes.add(this.numXAxis);
this.chart.axes.add(this.catYAxis);
for (const frag of fragments) {
stack.series.add(frag);
}
this.chart.series.add(stack);
}
else if (seriesType === 'Stacked 100 Bar Series') {
const stack = new IgcStacked100BarSeriesComponent();
stack.xAxis = this.numXAxis;
stack.yAxis = this.catYAxis;
stack.xAxisName = 'numXAxis';
stack.yAxisName = 'catYAxis';
this.chart.axes.add(this.numXAxis);
this.chart.axes.add(this.catYAxis);
for (const frag of fragments) {
stack.series.add(frag);
}
this.chart.series.add(stack);
}
}
getData(): any[] {
const data = [
{ Country: 'Canada', Coal: 400, Oil: 100, Gas: 175, Nuclear: 225, Hydro: 350 },
{ Country: 'China', Coal: 925, Oil: 200, Gas: 350, Nuclear: 400, Hydro: 625 },
{ Country: 'Russia', Coal: 550, Oil: 200, Gas: 250, Nuclear: 475, Hydro: 425 },
{ Country: 'Australia', Coal: 450, Oil: 100, Gas: 150, Nuclear: 175, Hydro: 350 },
{ Country: 'United States', Coal: 800, Oil: 250, Gas: 475, Nuclear: 575, Hydro: 750 },
{ Country: 'France', Coal: 375, Oil: 150, Gas: 350, Nuclear: 275, Hydro: 325 }
];
return data;
}
}
new DataChartTypeStackedSeries();
ts<!DOCTYPE html>
<html>
<head>
<title>DataChartTypeStackedSeries</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" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="options vertical">
<label class="legend-title">Energy Production By Source </label>
<igc-legend id="legend" orientation="Horizontal"></igc-legend>
</div>
<div class="overlay-right" style="margin-right: 1rem">
<span class="options-label">Type of Stacked Series </span>
<select id="seriesTypeSelect">
<option>Stacked Column Series</option>
<option>Stacked 100 Column Series</option>
<option>Stacked Area Series</option>
<option>Stacked 100 Area Series</option>
<option>Stacked Line Series</option>
<option>Stacked 100 Line Series</option>
<option>Stacked Spline Series</option>
<option>Stacked 100 Spline Series</option>
<option>Stacked Bar Series</option>
<option>Stacked 100 Bar Series</option>
</select>
</div>
<div class="container" >
<igc-data-chart id="chart" width="100%" height="100%"
is-horizontal-zoom-enabled="true"
is-vertical-zoom-enabled="true">
</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
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.
The following sections demonstrate individual types of Ignite UI for Web Components Stacked Charts.
Web Components Stacked Area Chart
Stacked Area Charts are 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 Chart, 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 the IgcDataChartComponent
control by binding your data to a 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
Sometimes the series represent 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 the IgcDataChartComponent
control by binding your data to a 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 Bar Chart
A Stacked Bar Chart, or Stacked Bar Graph, is a type of category chart that is used to compare the composition of different categories of data by displaying different sized fragments in the horizontal bars of the chart. The length of each bar, or stack of fragments, is proportionate to its overall value.
The Stacked Bar Chart differs from the Bar Chart in that the data points representing your data are stacked next to each other horizontally to visually group your data. Each stack can contain both positive and negative values. All positive values are grouped on the positive side of the X-Axis, and all negative values are grouped on the negative side of the X-Axis.
In this example of an Stacked Bar Chart, we have a Numeric X Axis (bottom labels of the chart) and a Category Y Axis (left labels of the chart). You can create this type of chart in the IgcDataChartComponent
control by binding your data to a IgcStackedBarSeriesComponent
, as shown in the example below.
export class EnergyRenewableConsumptionItem {
public constructor(init: Partial<EnergyRenewableConsumptionItem>) {
Object.assign(this, init);
}
public location: string;
public year: number;
public hydro: number;
public solar: number;
public wind: number;
public other: number;
}
export class EnergyRenewableConsumption extends Array<EnergyRenewableConsumptionItem> {
public constructor(items: Array<EnergyRenewableConsumptionItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new EnergyRenewableConsumptionItem(
{
location: `China`,
year: 2019,
hydro: 1269.5,
solar: 223,
wind: 405.2,
other: 102.8
}),
new EnergyRenewableConsumptionItem(
{
location: `Europe`,
year: 2019,
hydro: 632.54,
solar: 154,
wind: 461.3,
other: 220.3
}),
new EnergyRenewableConsumptionItem(
{
location: `USA`,
year: 2019,
hydro: 271.16,
solar: 108,
wind: 303.4,
other: 78.34
}),
new EnergyRenewableConsumptionItem(
{
location: `Brazil`,
year: 2019,
hydro: 399.3,
solar: 5.5,
wind: 55.83,
other: 56.25
}),
new EnergyRenewableConsumptionItem(
{
location: `Canada`,
year: 2019,
hydro: 381.98,
solar: 4.3,
wind: 34.17,
other: 10.81
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartCategoryCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule, IgcDataChartStackedModule, IgcStackedFragmentSeriesModule, IgcCalloutLayerModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryYAxisComponent, IgcNumericXAxisComponent, IgcStackedBarSeriesComponent, IgcStackedFragmentSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
import { EnergyRenewableConsumptionItem, EnergyRenewableConsumption } from './EnergyRenewableConsumption';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcLegendModule,
IgcDataChartCoreModule,
IgcDataChartCategoryModule,
IgcDataChartCategoryCoreModule,
IgcDataChartInteractivityModule,
IgcDataChartAnnotationModule,
IgcDataChartStackedModule,
IgcStackedFragmentSeriesModule,
IgcCalloutLayerModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcDataChartComponent
private yAxis: IgcCategoryYAxisComponent
private xAxis: IgcNumericXAxisComponent
private stackedBarSeries: IgcStackedBarSeriesComponent
private s1: IgcStackedFragmentSeriesComponent
private s2: IgcStackedFragmentSeriesComponent
private s3: IgcStackedFragmentSeriesComponent
private s4: 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 yAxis = this.yAxis = document.getElementById('yAxis') as IgcCategoryYAxisComponent;
var xAxis = this.xAxis = document.getElementById('xAxis') as IgcNumericXAxisComponent;
var stackedBarSeries = this.stackedBarSeries = document.getElementById('stackedBarSeries') as IgcStackedBarSeriesComponent;
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 dataToolTipLayer = this.dataToolTipLayer = document.getElementById('dataToolTipLayer') as IgcDataToolTipLayerComponent;
this._bind = () => {
chart.legend = this.legend;
yAxis.dataSource = this.energyRenewableConsumption;
stackedBarSeries.dataSource = this.energyRenewableConsumption;
stackedBarSeries.xAxis = this.xAxis;
stackedBarSeries.yAxis = this.yAxis;
}
this._bind();
}
private _energyRenewableConsumption: EnergyRenewableConsumption = null;
public get energyRenewableConsumption(): EnergyRenewableConsumption {
if (this._energyRenewableConsumption == null)
{
this._energyRenewableConsumption = new EnergyRenewableConsumption();
}
return this._energyRenewableConsumption;
}
}
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 Energy Consumption
</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-y-axis
name="yAxis"
id="yAxis"
label="location"
is-inverted="true"
gap="0.75">
</igc-category-y-axis>
<igc-numeric-x-axis
name="xAxis"
id="xAxis"
minimum-value="0"
title="TWh">
</igc-numeric-x-axis>
<igc-stacked-bar-series
name="stackedBarSeries"
id="stackedBarSeries"
show-default-tooltip="true"
area-fill-opacity="1">
<igc-stacked-fragment-series
name="s1"
id="s1"
value-member-path="hydro"
title="Hydro">
</igc-stacked-fragment-series>
<igc-stacked-fragment-series
name="s2"
id="s2"
value-member-path="wind"
title="Wind">
</igc-stacked-fragment-series>
<igc-stacked-fragment-series
name="s3"
id="s3"
value-member-path="solar"
title="Solar">
</igc-stacked-fragment-series>
<igc-stacked-fragment-series
name="s4"
id="s4"
value-member-path="other"
title="Other">
</igc-stacked-fragment-series>
</igc-stacked-bar-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% Bar Chart
The Web Components Stacked 100% Bar Chart is identical to the Web Components stacked bar chart in all aspects except in their treatment of the values on X-Axis (bottom labels of the chart). Instead of presenting a direct representation of the data, the stacked 100% bar chart presents the data in terms of percent of the sum of all values in a data point.
In this example of a Stacked 100% Bar Chart, the Energy Product values are shown as a 100% value of all of the data in the fragments of the horizontal bars. You can create this type of chart in the IgcDataChartComponent
control by binding your data to a IgcStacked100BarSeriesComponent
, as shown in the example below.
export class EnergyRenewableConsumptionItem {
public constructor(init: Partial<EnergyRenewableConsumptionItem>) {
Object.assign(this, init);
}
public location: string;
public year: number;
public hydro: number;
public solar: number;
public wind: number;
public other: number;
}
export class EnergyRenewableConsumption extends Array<EnergyRenewableConsumptionItem> {
public constructor(items: Array<EnergyRenewableConsumptionItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new EnergyRenewableConsumptionItem(
{
location: `China`,
year: 2019,
hydro: 1269.5,
solar: 223,
wind: 405.2,
other: 102.8
}),
new EnergyRenewableConsumptionItem(
{
location: `Europe`,
year: 2019,
hydro: 632.54,
solar: 154,
wind: 461.3,
other: 220.3
}),
new EnergyRenewableConsumptionItem(
{
location: `USA`,
year: 2019,
hydro: 271.16,
solar: 108,
wind: 303.4,
other: 78.34
}),
new EnergyRenewableConsumptionItem(
{
location: `Brazil`,
year: 2019,
hydro: 399.3,
solar: 5.5,
wind: 55.83,
other: 56.25
}),
new EnergyRenewableConsumptionItem(
{
location: `Canada`,
year: 2019,
hydro: 381.98,
solar: 4.3,
wind: 34.17,
other: 10.81
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartCategoryCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule, IgcDataChartStackedModule, IgcStackedFragmentSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryYAxisComponent, IgcNumericXAxisComponent, IgcStacked100BarSeriesComponent, IgcStackedFragmentSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
import { EnergyRenewableConsumptionItem, EnergyRenewableConsumption } from './EnergyRenewableConsumption';
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 yAxis: IgcCategoryYAxisComponent
private xAxis: IgcNumericXAxisComponent
private stacked100BarSeries: IgcStacked100BarSeriesComponent
private s1: IgcStackedFragmentSeriesComponent
private s2: IgcStackedFragmentSeriesComponent
private s3: IgcStackedFragmentSeriesComponent
private s4: 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 yAxis = this.yAxis = document.getElementById('yAxis') as IgcCategoryYAxisComponent;
var xAxis = this.xAxis = document.getElementById('xAxis') as IgcNumericXAxisComponent;
var stacked100BarSeries = this.stacked100BarSeries = document.getElementById('stacked100BarSeries') as IgcStacked100BarSeriesComponent;
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 dataToolTipLayer = this.dataToolTipLayer = document.getElementById('dataToolTipLayer') as IgcDataToolTipLayerComponent;
this._bind = () => {
chart.legend = this.legend;
yAxis.dataSource = this.energyRenewableConsumption;
stacked100BarSeries.dataSource = this.energyRenewableConsumption;
stacked100BarSeries.xAxis = this.xAxis;
stacked100BarSeries.yAxis = this.yAxis;
}
this._bind();
}
private _energyRenewableConsumption: EnergyRenewableConsumption = null;
public get energyRenewableConsumption(): EnergyRenewableConsumption {
if (this._energyRenewableConsumption == null)
{
this._energyRenewableConsumption = new EnergyRenewableConsumption();
}
return this._energyRenewableConsumption;
}
}
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 Energy Consumption
</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-y-axis
name="yAxis"
id="yAxis"
label="location"
is-inverted="true">
</igc-category-y-axis>
<igc-numeric-x-axis
name="xAxis"
id="xAxis"
minimum-value="0"
title="TWh">
</igc-numeric-x-axis>
<igc-stacked-100-bar-series
name="stacked100BarSeries"
id="stacked100BarSeries"
show-default-tooltip="true"
area-fill-opacity="1">
<igc-stacked-fragment-series
name="s1"
id="s1"
value-member-path="hydro"
title="Hydro">
</igc-stacked-fragment-series>
<igc-stacked-fragment-series
name="s2"
id="s2"
value-member-path="wind"
title="Wind">
</igc-stacked-fragment-series>
<igc-stacked-fragment-series
name="s3"
id="s3"
value-member-path="solar"
title="Solar">
</igc-stacked-fragment-series>
<igc-stacked-fragment-series
name="s4"
id="s4"
value-member-path="other"
title="Other">
</igc-stacked-fragment-series>
</igc-stacked-100-bar-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 Column Chart
The Stacked Column Chart is identical to the Column Chart in all aspects, except the series are represented on top of one another rather than to the side. The Stacked Column Chart is used to show comparing results between series. Each stacked fragment in the collection represents one visual element in each stack. Each stack can contain both positive and negative values. All positive values are grouped on the positive side of the Y-Axis, and all negative values are grouped on the negative side of the Y-Axis. The Stacked Column Chart uses the same concepts of data plotting as the Stacked Bar Chart but data points are stacked along vertical line (Y-Axis) rather than along horizontal line (X-Axis).
You can create this type of chart in the IgcDataChartComponent
control by binding your data to a IgcStackedColumnSeriesComponent
, 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, IgcStackedColumnSeriesComponent, 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 stackedColumnSeries: IgcStackedColumnSeriesComponent
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 stackedColumnSeries = this.stackedColumnSeries = document.getElementById('stackedColumnSeries') as IgcStackedColumnSeriesComponent;
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;
stackedColumnSeries.dataSource = this.continentsBirthRate;
stackedColumnSeries.xAxis = this.xAxis;
stackedColumnSeries.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-left-margin="10"
label-format="{0} m">
</igc-numeric-y-axis>
<igc-stacked-column-series
name="stackedColumnSeries"
id="stackedColumnSeries"
show-default-tooltip="false">
<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-column-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% Column Chart
The Stacked 100% Column Chart is identical to the Stacked Column Chart in all aspects except in their treatment of the values on Y-Axis. Instead of presenting a direct representation of the data, the Stacked 100% Column Chart presents the data in terms of percent of the sum of all values in a data point.
The example below shows a study made for online shopping traffic by departments via tablet, phone and personal computers. You can create this type of chart in the IgcDataChartComponent
control by binding your data to a IgcStacked100ColumnSeriesComponent
, as shown in the example below.
export class OnlineTrafficByDeviceItem {
public constructor(init: Partial<OnlineTrafficByDeviceItem>) {
Object.assign(this, init);
}
public category: string;
public desktop: number;
public mobile: number;
public tablet: number;
}
export class OnlineTrafficByDevice extends Array<OnlineTrafficByDeviceItem> {
public constructor(items: Array<OnlineTrafficByDeviceItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new OnlineTrafficByDeviceItem(
{
category: `Apparel`,
desktop: 27,
mobile: 66,
tablet: 7
}),
new OnlineTrafficByDeviceItem(
{
category: `Beauty`,
desktop: 29,
mobile: 66,
tablet: 5
}),
new OnlineTrafficByDeviceItem(
{
category: `Travel`,
desktop: 41,
mobile: 51,
tablet: 8
}),
new OnlineTrafficByDeviceItem(
{
category: `Grocery`,
desktop: 37,
mobile: 57,
tablet: 6
}),
new OnlineTrafficByDeviceItem(
{
category: `Energy`,
desktop: 58,
mobile: 39,
tablet: 3
}),
new OnlineTrafficByDeviceItem(
{
category: `Home Supply`,
desktop: 35,
mobile: 56,
tablet: 8
}),
new OnlineTrafficByDeviceItem(
{
category: `Financial`,
desktop: 58,
mobile: 39,
tablet: 3
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartCategoryCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule, IgcDataChartStackedModule, IgcStackedFragmentSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcStacked100ColumnSeriesComponent, IgcStackedFragmentSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
import { OnlineTrafficByDeviceItem, OnlineTrafficByDevice } from './OnlineTrafficByDevice';
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 stacked100ColumnSeries: IgcStacked100ColumnSeriesComponent
private s1: IgcStackedFragmentSeriesComponent
private s2: IgcStackedFragmentSeriesComponent
private s3: 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 stacked100ColumnSeries = this.stacked100ColumnSeries = document.getElementById('stacked100ColumnSeries') as IgcStacked100ColumnSeriesComponent;
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 dataToolTipLayer = this.dataToolTipLayer = document.getElementById('dataToolTipLayer') as IgcDataToolTipLayerComponent;
this._bind = () => {
chart.legend = this.legend;
xAxis.dataSource = this.onlineTrafficByDevice;
stacked100ColumnSeries.dataSource = this.onlineTrafficByDevice;
stacked100ColumnSeries.xAxis = this.xAxis;
stacked100ColumnSeries.yAxis = this.yAxis;
}
this._bind();
}
private _onlineTrafficByDevice: OnlineTrafficByDevice = null;
public get onlineTrafficByDevice(): OnlineTrafficByDevice {
if (this._onlineTrafficByDevice == null)
{
this._onlineTrafficByDevice = new OnlineTrafficByDevice();
}
return this._onlineTrafficByDevice;
}
}
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">
Distribution of Online Traffic Worldwide, by Device
</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="category"
gap="0.75">
</igc-category-x-axis>
<igc-numeric-y-axis
name="yAxis"
id="yAxis"
minimum-value="0">
</igc-numeric-y-axis>
<igc-stacked-100-column-series
name="stacked100ColumnSeries"
id="stacked100ColumnSeries"
show-default-tooltip="true"
area-fill-opacity="1">
<igc-stacked-fragment-series
name="s1"
id="s1"
value-member-path="desktop"
title="Desktop">
</igc-stacked-fragment-series>
<igc-stacked-fragment-series
name="s2"
id="s2"
value-member-path="mobile"
title="Mobile">
</igc-stacked-fragment-series>
<igc-stacked-fragment-series
name="s3"
id="s3"
value-member-path="tablet"
title="Tablet">
</igc-stacked-fragment-series>
</igc-stacked-100-column-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 Line Chart
The Stacked Line Chart is often used to show the change of value over time such as the amount of renewable electricity produced for several years between regions. You can create this type of chart in the IgcDataChartComponent
control by binding your data to a IgcStackedLineSeriesComponent
, 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, IgcStackedLineSeriesComponent, 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 stackedLineSeries: IgcStackedLineSeriesComponent
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 stackedLineSeries = this.stackedLineSeries = document.getElementById('stackedLineSeries') as IgcStackedLineSeriesComponent;
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;
stackedLineSeries.dataSource = this.continentsBirthRate;
stackedLineSeries.xAxis = this.xAxis;
stackedLineSeries.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-line-series
name="stackedLineSeries"
id="stackedLineSeries"
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-line-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% Line Chart
The Stacked 100% Line Chart is identical to the Stacked Line Chart in all aspects except in their treatment of the values on y-axis. Instead of presenting a direct representation of the data, the Stacked 100% Line Chart presents the data in terms of percent of the sum of all values in a data point. The example below shows a study made for online shopping traffic by departments via tablet, phone and personal computers.
You can create this type of chart in the IgcDataChartComponent
control by binding your data to a IgcStacked100LineSeriesComponent
, 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, IgcStacked100LineSeriesComponent, 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 stacked100LineSeries: IgcStacked100LineSeriesComponent
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 stacked100LineSeries = this.stacked100LineSeries = document.getElementById('stacked100LineSeries') as IgcStacked100LineSeriesComponent;
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;
stacked100LineSeries.dataSource = this.continentsBirthRate;
stacked100LineSeries.xAxis = this.xAxis;
stacked100LineSeries.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-line-series
name="stacked100LineSeries"
id="stacked100LineSeries"
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-line-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
Stacked Spline Area Charts are 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 Charts follow all of the same requirements as Area Chart, 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 the IgcDataChartComponent
control by binding your data to a 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 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 the IgcDataChartComponent
control by binding your data to a 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 Stacked Spline Chart
The Stacked Spline Chart is often used to show the change of value over time such as the amount of renewable electricity produced for several years between regions. You can create this type of chart in the IgcDataChartComponent
control by binding your data to a IgcStackedSplineSeriesComponent
, 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, IgcStackedSplineSeriesComponent, 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 stackedSplineSeries: IgcStackedSplineSeriesComponent
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 stackedSplineSeries = this.stackedSplineSeries = document.getElementById('stackedSplineSeries') as IgcStackedSplineSeriesComponent;
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;
stackedSplineSeries.dataSource = this.continentsBirthRate;
stackedSplineSeries.xAxis = this.xAxis;
stackedSplineSeries.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-left-margin="10"
label-format="{0} m">
</igc-numeric-y-axis>
<igc-stacked-spline-series
name="stackedSplineSeries"
id="stackedSplineSeries"
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-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 Chart
The Stacked 100% Spline Chart is identical to the Stacked Spline Chart in all aspects except in their treatment of the values on y-axis. Instead of presenting a direct representation of the data, the Stacked 100% Spline Chart presents the data in terms of percent of the sum of all values in a data point. The example below shows a study made for online shopping traffic by departments via tablet, phone and personal computers.
You can create this type of chart in the IgcDataChartComponent
control by binding your data to a IgcStacked100SplineSeriesComponent
.
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, IgcStacked100SplineSeriesComponent, 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 stacked100SplineSeries: IgcStacked100SplineSeriesComponent
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 stacked100SplineSeries = this.stacked100SplineSeries = document.getElementById('stacked100SplineSeries') as IgcStacked100SplineSeriesComponent;
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;
stacked100SplineSeries.dataSource = this.continentsBirthRate;
stacked100SplineSeries.xAxis = this.xAxis;
stacked100SplineSeries.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"
label-format="{0}%">
</igc-numeric-y-axis>
<igc-stacked-100-spline-series
name="stacked100SplineSeries"
id="stacked100SplineSeries"
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-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 the above sections:
Chart Type | Control Name | API Members |
---|---|---|
Stacked Area | IgcDataChartComponent |
IgcStackedAreaSeriesComponent |
Stacked Bar | IgcDataChartComponent |
IgcStackedBarSeriesComponent |
Stacked Column | IgcDataChartComponent |
IgcStackedColumnSeriesComponent |
Stacked Line | IgcDataChartComponent |
IgcStackedLineSeriesComponent |
Stacked Spline | IgcDataChartComponent |
IgcStackedSplineSeriesComponent |
Stacked Spline Area | IgcDataChartComponent |
IgcStackedSplineAreaSeriesComponent |
Stacked 100% Area | IgcDataChartComponent |
IgcStacked100AreaSeriesComponent |
Stacked 100% Bar | IgcDataChartComponent |
IgcStacked100BarSeriesComponent |
Stacked 100% Column | IgcDataChartComponent |
IgcStacked100ColumnSeriesComponent |
Stacked 100% Line | IgcDataChartComponent |
IgcStacked100LineSeriesComponent |
Stacked 100% Spline | IgcDataChartComponent |
IgcStacked100SplineSeriesComponent |
Stacked 100% Spline Area | IgcDataChartComponent |
IgcStacked100SplineAreaSeriesComponent |