Web Components Step Chart
The Ignite UI for Web Components Step Chart belongs to a group of category charts that render as a collection of points connected by continuous vertical and horizontal lines. Values are represented on the y-axis and categories are displayed on the x-axis. Step Chart emphasizes the amount of change over a period of time or compares multiple items.
Web Components Step Area Chart
You can create Web Components Step Area Chart in the IgcCategoryChartComponent
control by setting chartType
property to StepArea
enum, as shown in the example below.
export class CountryRenewableElectricityItem {
public constructor(init: Partial<CountryRenewableElectricityItem>) {
Object.assign(this, init);
}
public year: string;
public europe: number;
public china: number;
public america: number;
}
export class CountryRenewableElectricity extends Array<CountryRenewableElectricityItem> {
public constructor(items: Array<CountryRenewableElectricityItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CountryRenewableElectricityItem(
{
year: `2009`,
europe: 34,
china: 21,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2010`,
europe: 43,
china: 26,
america: 24
}),
new CountryRenewableElectricityItem(
{
year: `2011`,
europe: 66,
china: 29,
america: 28
}),
new CountryRenewableElectricityItem(
{
year: `2012`,
europe: 69,
china: 32,
america: 26
}),
new CountryRenewableElectricityItem(
{
year: `2013`,
europe: 58,
china: 47,
america: 38
}),
new CountryRenewableElectricityItem(
{
year: `2014`,
europe: 40,
china: 46,
america: 31
}),
new CountryRenewableElectricityItem(
{
year: `2015`,
europe: 78,
china: 50,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2016`,
europe: 13,
china: 90,
america: 52
}),
new CountryRenewableElectricityItem(
{
year: `2017`,
europe: 78,
china: 132,
america: 50
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2019`,
europe: 80,
china: 96,
america: 38
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcLegendModule, IgcCategoryChartModule, IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcLegendModule,
IgcCategoryChartModule,
IgcDataChartInteractivityModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcCategoryChartComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
this._bind = () => {
chart.dataSource = this.countryRenewableElectricity;
chart.legend = this.legend;
}
this._bind();
}
private _countryRenewableElectricity: CountryRenewableElectricity = null;
public get countryRenewableElectricity(): CountryRenewableElectricity {
if (this._countryRenewableElectricity == null)
{
this._countryRenewableElectricity = new CountryRenewableElectricity();
}
return this._countryRenewableElectricity;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="legend-title">
Renewable Electricity Generated
</div>
<div class="legend">
<igc-legend
name="legend"
id="legend"
orientation="Horizontal">
</igc-legend>
</div>
<div class="container fill">
<igc-category-chart
name="chart"
id="chart"
chart-type="StepArea"
title-alignment="Left"
title-left-margin="25"
title-top-margin="10"
title-bottom-margin="10"
is-category-highlighting-enabled="true"
is-series-highlighting-enabled="true"
is-transition-in-enabled="true"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false"
y-axis-title="TWh"
crosshairs-snap-to-data="true">
</igc-category-chart>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>
html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
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.
Web Components Step Line Chart
The Web Components Step Line Chart is very similar to Step Area Chart, except that the area below lines are filled in.
You can create Step Line Chart in the IgcCategoryChartComponent
control by binding your data and setting chartType
property to StepLine
value, as shown in the example below.
export class CountryRenewableElectricityItem {
public constructor(init: Partial<CountryRenewableElectricityItem>) {
Object.assign(this, init);
}
public year: string;
public europe: number;
public china: number;
public america: number;
}
export class CountryRenewableElectricity extends Array<CountryRenewableElectricityItem> {
public constructor(items: Array<CountryRenewableElectricityItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CountryRenewableElectricityItem(
{
year: `2009`,
europe: 34,
china: 21,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2010`,
europe: 43,
china: 26,
america: 24
}),
new CountryRenewableElectricityItem(
{
year: `2011`,
europe: 66,
china: 29,
america: 28
}),
new CountryRenewableElectricityItem(
{
year: `2012`,
europe: 69,
china: 32,
america: 26
}),
new CountryRenewableElectricityItem(
{
year: `2013`,
europe: 58,
china: 47,
america: 38
}),
new CountryRenewableElectricityItem(
{
year: `2014`,
europe: 40,
china: 46,
america: 31
}),
new CountryRenewableElectricityItem(
{
year: `2015`,
europe: 78,
china: 50,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2016`,
europe: 13,
china: 90,
america: 52
}),
new CountryRenewableElectricityItem(
{
year: `2017`,
europe: 78,
china: 132,
america: 50
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2019`,
europe: 80,
china: 96,
america: 38
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcLegendModule, IgcCategoryChartModule, IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcLegendModule,
IgcCategoryChartModule,
IgcDataChartInteractivityModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcCategoryChartComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
this._bind = () => {
chart.legend = this.legend;
chart.dataSource = this.countryRenewableElectricity;
}
this._bind();
}
private _countryRenewableElectricity: CountryRenewableElectricity = null;
public get countryRenewableElectricity(): CountryRenewableElectricity {
if (this._countryRenewableElectricity == null)
{
this._countryRenewableElectricity = new CountryRenewableElectricity();
}
return this._countryRenewableElectricity;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="legend-title">
Renewable Electricity Generated
</div>
<div class="legend">
<igc-legend
name="legend"
id="legend"
orientation="Horizontal">
</igc-legend>
</div>
<div class="container fill">
<igc-category-chart
name="chart"
id="chart"
chart-type="StepLine"
included-properties="year, europe, china, america"
is-category-highlighting-enabled="true"
is-series-highlighting-enabled="true"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false"
x-axis-interval="1"
y-axis-title="TWh"
crosshairs-snap-to-data="true">
</igc-category-chart>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>
html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
Web Components Step Chart Styling
If you need Step Charts with more features such as composite other series, you can configure the markerTypes
, markerBrushes
, markerOutlines
, lines' brushes
, and lines' outlines
properties on the IgcCategoryChartComponent
control as demonstrated below.
export class CountryRenewableElectricityItem {
public constructor(init: Partial<CountryRenewableElectricityItem>) {
Object.assign(this, init);
}
public year: string;
public europe: number;
public china: number;
public america: number;
}
export class CountryRenewableElectricity extends Array<CountryRenewableElectricityItem> {
public constructor(items: Array<CountryRenewableElectricityItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CountryRenewableElectricityItem(
{
year: `2009`,
europe: 34,
china: 21,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2010`,
europe: 43,
china: 26,
america: 24
}),
new CountryRenewableElectricityItem(
{
year: `2011`,
europe: 66,
china: 29,
america: 28
}),
new CountryRenewableElectricityItem(
{
year: `2012`,
europe: 69,
china: 32,
america: 26
}),
new CountryRenewableElectricityItem(
{
year: `2013`,
europe: 58,
china: 47,
america: 38
}),
new CountryRenewableElectricityItem(
{
year: `2014`,
europe: 40,
china: 46,
america: 31
}),
new CountryRenewableElectricityItem(
{
year: `2015`,
europe: 78,
china: 50,
america: 19
}),
new CountryRenewableElectricityItem(
{
year: `2016`,
europe: 13,
china: 90,
america: 52
}),
new CountryRenewableElectricityItem(
{
year: `2017`,
europe: 78,
china: 132,
america: 50
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2018`,
europe: 40,
china: 134,
america: 34
}),
new CountryRenewableElectricityItem(
{
year: `2019`,
europe: 80,
china: 96,
america: 38
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcLegendModule, IgcCategoryChartModule, IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcLegendModule,
IgcCategoryChartModule,
IgcDataChartInteractivityModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcCategoryChartComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
this._bind = () => {
chart.legend = this.legend;
chart.dataSource = this.countryRenewableElectricity;
}
this._bind();
}
private _countryRenewableElectricity: CountryRenewableElectricity = null;
public get countryRenewableElectricity(): CountryRenewableElectricity {
if (this._countryRenewableElectricity == null)
{
this._countryRenewableElectricity = new CountryRenewableElectricity();
}
return this._countryRenewableElectricity;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="legend-title">
Renewable Electricity Generated
</div>
<div class="legend">
<igc-legend
name="legend"
id="legend"
orientation="Horizontal">
</igc-legend>
</div>
<div class="container fill">
<igc-category-chart
name="chart"
id="chart"
chart-type="StepLine"
included-properties="year, europe, china, america"
is-category-highlighting-enabled="true"
is-series-highlighting-enabled="true"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false"
y-axis-title="TWh"
marker-brushes="white"
marker-outlines="rgba(140, 231, 217, 1) rgba(238, 88, 121, 1) rgba(115, 86, 86, 1)"
brushes="rgba(140, 231, 217, 1) rgba(238, 88, 121, 1) rgba(115, 86, 86, 1)"
outlines="rgba(140, 231, 217, 1) rgba(238, 88, 121, 1) rgba(115, 86, 86, 1)"
crosshairs-snap-to-data="true">
</igc-category-chart>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>
html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
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: