Web Components Column Chart
The Ignite UI for Web Components Column Char, Column Graph, or Vertical Bar Chart is among the most common category chart types used to quickly compare frequency, count, total, or average of data in different categories with data encoded by columns with equal widths but different heights. These columns extend from the bottom to top of the chart towards the values of data points. This chart emphasizes the amount of change over a period of time or compares multiple items. Column Chart is very similar to Bar Chart except that Column Chart renders in vertical orientation (up and down) while Bar Chart has horizontal orientation (left to right) or 90 degrees clockwise rotation.
Web Components Column Chart Example
You can create Web Components Column Chart in the IgcCategoryChartComponent
control by binding your data and setting chartType
to Column enum, as shown in the example below:
export class HighestGrossingMoviesItem {
public constructor(init: Partial<HighestGrossingMoviesItem>) {
Object.assign(this, init);
}
public franchise: string;
public totalRevenue: number;
public highestGrossing: number;
}
export class HighestGrossingMovies extends Array<HighestGrossingMoviesItem> {
public constructor(items: Array<HighestGrossingMoviesItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new HighestGrossingMoviesItem(
{
franchise: `Marvel Universe`,
totalRevenue: 22.55,
highestGrossing: 2.8
}),
new HighestGrossingMoviesItem(
{
franchise: `Star Wars`,
totalRevenue: 10.32,
highestGrossing: 2.07
}),
new HighestGrossingMoviesItem(
{
franchise: `Harry Potter`,
totalRevenue: 9.19,
highestGrossing: 1.34
}),
new HighestGrossingMoviesItem(
{
franchise: `Avengers`,
totalRevenue: 7.76,
highestGrossing: 2.8
}),
new HighestGrossingMoviesItem(
{
franchise: `Spider Man`,
totalRevenue: 7.22,
highestGrossing: 1.28
}),
new HighestGrossingMoviesItem(
{
franchise: `James Bond`,
totalRevenue: 7.12,
highestGrossing: 1.11
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcLegendModule,
IgcCategoryChartModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcCategoryChartComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
this._bind = () => {
chart.dataSource = this.highestGrossingMovies;
chart.legend = this.legend;
}
this._bind();
}
private _highestGrossingMovies: HighestGrossingMovies = null;
public get highestGrossingMovies(): HighestGrossingMovies {
if (this._highestGrossingMovies == null)
{
this._highestGrossingMovies = new HighestGrossingMovies();
}
return this._highestGrossingMovies;
}
}
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">
Highest Grossing Movie Franchises
</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="Column"
x-axis-interval="1"
y-axis-title="Billions of U.S. Dollars"
y-axis-title-left-margin="10"
y-axis-title-right-margin="5"
y-axis-label-left-margin="0"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false"
is-category-highlighting-enabled="true"
crosshairs-display-mode="None">
</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.
Column Charts Recommendations
Column Charts Use Cases
There are several uses cases for Column Charts. When you:
- Need to compare data values of related categories.
- Need to compare data over a time period.
- Need to display negative values as well as positive values in the same data set.
- Have a large, high-volume data set that fits well with the chart interactions like Panning, Zooming, and Drill-down.
Column Charts Best Practices:
- Always start the Y-Axis (left or right axis) at 0 so data comparison is accurate.
- Order time-series data from left to right.
When Not to Use Column Charts
- You have many (more than 10 or 12) series of data. Your goal is to ensure the chart is readable.
Column Charts Data Structure:
- The data model must contain at least one numeric property.
- The data model may contain an options string or date-time property for labels.
- The data source should contain at least one data item.
Web Components Column Chart with Single Series
Column Chart belongs to a group of Category Series and it is rendered using a collection of rectangles that extend from the bottom to top of the chart towards the values of data points.
You can create this type of chart in the IgcCategoryChartComponent
control by binding your data and setting the chartType
property to Column value, as shown in the example below:
export class TemperatureAverageDataItem {
public constructor(init: Partial<TemperatureAverageDataItem>) {
Object.assign(this, init);
}
public month: string;
public temperature: number;
}
export class TemperatureAverageData extends Array<TemperatureAverageDataItem> {
public constructor(items: Array<TemperatureAverageDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new TemperatureAverageDataItem(
{
month: `Jan`,
temperature: 3
}),
new TemperatureAverageDataItem(
{
month: `Feb`,
temperature: 4
}),
new TemperatureAverageDataItem(
{
month: `Mar`,
temperature: 9
}),
new TemperatureAverageDataItem(
{
month: `Apr`,
temperature: 15
}),
new TemperatureAverageDataItem(
{
month: `May`,
temperature: 21
}),
new TemperatureAverageDataItem(
{
month: `Jun`,
temperature: 26
}),
new TemperatureAverageDataItem(
{
month: `Jul`,
temperature: 29
}),
new TemperatureAverageDataItem(
{
month: `Aug`,
temperature: 28
}),
new TemperatureAverageDataItem(
{
month: `Sep`,
temperature: 24
}),
new TemperatureAverageDataItem(
{
month: `Oct`,
temperature: 18
}),
new TemperatureAverageDataItem(
{
month: `Nov`,
temperature: 11
}),
new TemperatureAverageDataItem(
{
month: `Dec`,
temperature: 5
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { TemperatureAverageDataItem, TemperatureAverageData } from './TemperatureAverageData';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcCategoryChartModule
);
export class Sample {
private chart: IgcCategoryChartComponent
private _bind: () => void;
constructor() {
var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
this._bind = () => {
chart.dataSource = this.temperatureAverageData;
}
this._bind();
}
private _temperatureAverageData: TemperatureAverageData = null;
public get temperatureAverageData(): TemperatureAverageData {
if (this._temperatureAverageData == null)
{
this._temperatureAverageData = new TemperatureAverageData();
}
return this._temperatureAverageData;
}
}
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">
Average Temperature Range in New York
</div>
<div class="container fill">
<igc-category-chart
name="chart"
id="chart"
chart-type="Column"
y-axis-title="Temperature in Degrees Celsius"
y-axis-title-left-margin="10"
y-axis-title-right-margin="5"
y-axis-label-left-margin="0"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false"
is-category-highlighting-enabled="true"
highlighting-mode="FadeOthersSpecific"
highlighting-behavior="NearestItemsAndSeries"
crosshairs-display-mode="None">
</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 Column Chart with Multiple Series
The Column Chart is able to render multiple columns per category for comparison purposes. You can create this type of chart in the IgcCategoryChartComponent
control by binding your data and setting the chartType
property to Column value, as shown in the example below:
export class HighestGrossingMoviesItem {
public constructor(init: Partial<HighestGrossingMoviesItem>) {
Object.assign(this, init);
}
public franchise: string;
public totalRevenue: number;
public highestGrossing: number;
}
export class HighestGrossingMovies extends Array<HighestGrossingMoviesItem> {
public constructor(items: Array<HighestGrossingMoviesItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new HighestGrossingMoviesItem(
{
franchise: `Marvel Universe`,
totalRevenue: 22.55,
highestGrossing: 2.8
}),
new HighestGrossingMoviesItem(
{
franchise: `Star Wars`,
totalRevenue: 10.32,
highestGrossing: 2.07
}),
new HighestGrossingMoviesItem(
{
franchise: `Harry Potter`,
totalRevenue: 9.19,
highestGrossing: 1.34
}),
new HighestGrossingMoviesItem(
{
franchise: `Avengers`,
totalRevenue: 7.76,
highestGrossing: 2.8
}),
new HighestGrossingMoviesItem(
{
franchise: `Spider Man`,
totalRevenue: 7.22,
highestGrossing: 1.28
}),
new HighestGrossingMoviesItem(
{
franchise: `James Bond`,
totalRevenue: 7.12,
highestGrossing: 1.11
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcLegendModule,
IgcCategoryChartModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcCategoryChartComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
this._bind = () => {
chart.dataSource = this.highestGrossingMovies;
chart.legend = this.legend;
}
this._bind();
}
private _highestGrossingMovies: HighestGrossingMovies = null;
public get highestGrossingMovies(): HighestGrossingMovies {
if (this._highestGrossingMovies == null)
{
this._highestGrossingMovies = new HighestGrossingMovies();
}
return this._highestGrossingMovies;
}
}
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">
Highest Grossing Movie Franchises
</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="Column"
x-axis-interval="1"
y-axis-title="Billions of U.S. Dollars"
y-axis-title-left-margin="10"
y-axis-title-right-margin="5"
y-axis-label-left-margin="0"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false"
is-category-highlighting-enabled="true"
crosshairs-display-mode="None">
</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 Column Chart Styling
The Web Components Column Chart has many options for styling and modification of the visual appearance.
You can create this type of chart in the IgcCategoryChartComponent
control by binding your data, 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, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { EnergyRenewableConsumptionItem, EnergyRenewableConsumption } from './EnergyRenewableConsumption';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcLegendModule,
IgcCategoryChartModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcCategoryChartComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
this._bind = () => {
chart.dataSource = this.energyRenewableConsumption;
chart.legend = this.legend;
}
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">
Percentage Change in Energy Generation
</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="Column"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false"
is-series-highlighting-enabled="true"
brushes="rgba(157, 231, 114, 1) rgba(139, 91, 177, 1) rgba(109, 177, 255, 1) rgba(238, 88, 121, 1) rgba(248, 161, 95, 1)"
outlines="white"
x-axis-major-stroke="lightgray"
x-axis-gap="0.5"
crosshairs-display-mode="None"
is-category-highlighting-enabled="true"
highlighting-mode="FadeOthersSpecific"
highlighting-behavior="NearestItemsAndSeries">
</igc-category-chart>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>
html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
Advanced Types of Column Charts
The following sections explain more advanced types of Web Components Column Charts that can be created using the IgcDataChartComponent
control instead of IgcCategoryChartComponent
control with simplified API.
Web Components Waterfall Chart
The Waterfall Chart belongs to a group of category charts and it is rendered using a collection of vertical columns that show the difference between consecutive data points. The columns are color coded for distinguishing between positive and negative changes in value. The Waterfall Chart is similar in appearance to the Range Column Chart, but it requires only one numeric data column rather than two columns for each data point.
You can create this type of chart in the IgcDataChartComponent
control by binding your data to a IgcWaterfallSeriesComponent
, as shown in the example below:
export class CompanyIncomeDataItem {
public constructor(init: Partial<CompanyIncomeDataItem>) {
Object.assign(this, init);
}
public costs: number;
public netIncome: number;
public category: string;
}
export class CompanyIncomeData extends Array<CompanyIncomeDataItem> {
public constructor(items: Array<CompanyIncomeDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CompanyIncomeDataItem(
{
costs: 55,
netIncome: null,
category: `Revenue`
}),
new CompanyIncomeDataItem(
{
costs: 45,
netIncome: null,
category: `Expenses`
}),
new CompanyIncomeDataItem(
{
costs: 35,
netIncome: null,
category: `Research`
}),
new CompanyIncomeDataItem(
{
costs: 28,
netIncome: null,
category: `Marketing`
}),
new CompanyIncomeDataItem(
{
costs: 25,
netIncome: null,
category: `Administration`
}),
new CompanyIncomeDataItem(
{
costs: 55,
netIncome: null,
category: `Total Costs`
}),
new CompanyIncomeDataItem(
{
costs: 0,
netIncome: 25,
category: `Net Income`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcDataChartCoreModule, IgcDataChartCategoryModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcWaterfallSeriesComponent } from 'igniteui-webcomponents-charts';
import { CompanyIncomeDataItem, CompanyIncomeData } from './CompanyIncomeData';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcDataChartCoreModule,
IgcDataChartCategoryModule
);
export class Sample {
private chart: IgcDataChartComponent
private xAxis: IgcCategoryXAxisComponent
private yAxis: IgcNumericYAxisComponent
private waterfallSeries1: IgcWaterfallSeriesComponent
private waterfallSeries2: IgcWaterfallSeriesComponent
private _bind: () => void;
constructor() {
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 waterfallSeries1 = this.waterfallSeries1 = document.getElementById('WaterfallSeries1') as IgcWaterfallSeriesComponent;
var waterfallSeries2 = this.waterfallSeries2 = document.getElementById('WaterfallSeries2') as IgcWaterfallSeriesComponent;
this._bind = () => {
xAxis.dataSource = this.companyIncomeData;
waterfallSeries1.xAxis = this.xAxis;
waterfallSeries1.yAxis = this.yAxis;
waterfallSeries1.dataSource = this.companyIncomeData;
waterfallSeries2.xAxis = this.xAxis;
waterfallSeries2.yAxis = this.yAxis;
waterfallSeries2.dataSource = this.companyIncomeData;
}
this._bind();
}
private _companyIncomeData: CompanyIncomeData = null;
public get companyIncomeData(): CompanyIncomeData {
if (this._companyIncomeData == null)
{
this._companyIncomeData = new CompanyIncomeData();
}
return this._companyIncomeData;
}
}
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">
Facebook Consolidated Statements of Income
</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"
interval="1"
overlap="1">
</igc-category-x-axis>
<igc-numeric-y-axis
name="yAxis"
id="yAxis"
title="Millions of Dollars"
title-angle="90"
title-left-margin="10"
minimum-value="0"
maximum-value="60">
</igc-numeric-y-axis>
<igc-waterfall-series
name="WaterfallSeries1"
id="WaterfallSeries1"
title="Value"
value-member-path="costs"
show-default-tooltip="true"
is-transition-in-enabled="true">
</igc-waterfall-series>
<igc-waterfall-series
name="WaterfallSeries2"
id="WaterfallSeries2"
title="Value"
brush="rgba(116, 70, 185, 1)"
outline="rgba(116, 70, 185, 1)"
value-member-path="netIncome"
show-default-tooltip="true"
is-transition-in-enabled="true">
</igc-waterfall-series>
</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 similar to the Category 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 IgcStackedBarSeriesComponent
, 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.
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 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 Range Column Chart
The Web Components Range Column Chart belongs to a group of range charts and is rendered using vertical rectangles that can appear in the middle of the plot area of the chart, rather than stretching from the bottom like the traditional Category Column Chart. This type of series emphasizes the amount of change between low values and high values in the same data point over a period of time or compares multiple items. Range values are represented on the Y-Axis and categories are displayed on the X-Axis.
The Range Column Chart is identical to the Range Area Chart(area-chart.md#web-components-range-area-chart) in all aspects except that the ranges are represented as a set of vertical columns rather than a filled area.
You can create this type of chart in the IgcDataChartComponent
control by binding your data to a IgcRangeColumnSeriesComponent
, as shown in the example below:
export class TemperatureRangeDataItem {
public constructor(init: Partial<TemperatureRangeDataItem>) {
Object.assign(this, init);
}
public month: string;
public highNY: number;
public lowNY: number;
public highLA: number;
public lowLA: number;
}
export class TemperatureRangeData extends Array<TemperatureRangeDataItem> {
public constructor(items: Array<TemperatureRangeDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new TemperatureRangeDataItem(
{
month: `Jan`,
highNY: 10.6,
lowNY: -6.6,
highLA: 28.3,
lowLA: 7.8
}),
new TemperatureRangeDataItem(
{
month: `Feb`,
highNY: 7.8,
lowNY: -9.9,
highLA: 31.1,
lowLA: 5.6
}),
new TemperatureRangeDataItem(
{
month: `Mar`,
highNY: 12.2,
lowNY: -3.8,
highLA: 27.8,
lowLA: 8.3
}),
new TemperatureRangeDataItem(
{
month: `Apr`,
highNY: 11.7,
lowNY: 2.2,
highLA: 33.9,
lowLA: 10.6
}),
new TemperatureRangeDataItem(
{
month: `May`,
highNY: 19.4,
lowNY: 1.1,
highLA: 35,
lowLA: 13.9
}),
new TemperatureRangeDataItem(
{
month: `Jun`,
highNY: 23.3,
lowNY: 10.6,
highLA: 36.7,
lowLA: 16.1
}),
new TemperatureRangeDataItem(
{
month: `Jul`,
highNY: 27.2,
lowNY: 19.4,
highLA: 33.3,
lowLA: 15.6
}),
new TemperatureRangeDataItem(
{
month: `Aug`,
highNY: 25.6,
lowNY: 16.7,
highLA: 36.7,
lowLA: 15.6
}),
new TemperatureRangeDataItem(
{
month: `Sep`,
highNY: 22.8,
lowNY: 8.9,
highLA: 43.9,
lowLA: 16.1
}),
new TemperatureRangeDataItem(
{
month: `Oct`,
highNY: 17.8,
lowNY: 0,
highLA: 38.3,
lowLA: 11.1
}),
new TemperatureRangeDataItem(
{
month: `Nov`,
highNY: 17.8,
lowNY: -1,
highLA: 32.8,
lowLA: 6.7
}),
new TemperatureRangeDataItem(
{
month: `Dec`,
highNY: 8.3,
lowNY: -6.6,
highLA: 28.9,
lowLA: 5.6
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule, IgcLegendModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcRangeColumnSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
import { TemperatureRangeDataItem, TemperatureRangeData } from './TemperatureRangeData';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcDataChartCoreModule,
IgcDataChartCategoryModule,
IgcDataChartInteractivityModule,
IgcDataChartAnnotationModule,
IgcLegendModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcDataChartComponent
private xAxis: IgcCategoryXAxisComponent
private yAxis: IgcNumericYAxisComponent
private rangeColumnSeries1: IgcRangeColumnSeriesComponent
private rangeColumnSeries2: IgcRangeColumnSeriesComponent
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 rangeColumnSeries1 = this.rangeColumnSeries1 = document.getElementById('RangeColumnSeries1') as IgcRangeColumnSeriesComponent;
var rangeColumnSeries2 = this.rangeColumnSeries2 = document.getElementById('RangeColumnSeries2') as IgcRangeColumnSeriesComponent;
var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('dataToolTipLayer') as IgcDataToolTipLayerComponent;
this._bind = () => {
chart.legend = this.legend;
xAxis.dataSource = this.temperatureRangeData;
rangeColumnSeries1.xAxis = this.xAxis;
rangeColumnSeries1.yAxis = this.yAxis;
rangeColumnSeries1.dataSource = this.temperatureRangeData;
rangeColumnSeries2.xAxis = this.xAxis;
rangeColumnSeries2.yAxis = this.yAxis;
rangeColumnSeries2.dataSource = this.temperatureRangeData;
}
this._bind();
}
private _temperatureRangeData: TemperatureRangeData = null;
public get temperatureRangeData(): TemperatureRangeData {
if (this._temperatureRangeData == null)
{
this._temperatureRangeData = new TemperatureRangeData();
}
return this._temperatureRangeData;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="legend-title">
Monthly Temperature Range in LA and NYC
</div>
<div class="legend">
<igc-legend
name="legend"
id="legend"
orientation="Horizontal">
</igc-legend>
</div>
<div class="container fill">
<igc-data-chart
name="chart"
id="chart"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false">
<igc-category-x-axis
name="xAxis"
id="xAxis"
label="month"
interval="1">
</igc-category-x-axis>
<igc-numeric-y-axis
name="yAxis"
id="yAxis"
title="Temperature (in Celsius)"
title-angle="90"
title-left-margin="10">
</igc-numeric-y-axis>
<igc-range-column-series
name="RangeColumnSeries1"
id="RangeColumnSeries1"
title="Los Angeles"
low-member-path="lowLA"
high-member-path="highLA"
show-default-tooltip="false">
</igc-range-column-series>
<igc-range-column-series
name="RangeColumnSeries2"
id="RangeColumnSeries2"
title="New York"
low-member-path="lowNY"
high-member-path="highNY"
show-default-tooltip="false">
</igc-range-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 Radial Column Chart
The Radial Column Chart belongs to a group of Radial Chart, and is visualized by using a collection of rectangles that extend from the center of the chart toward the locations of data points. This utilizes the same concepts of data plotting as the Category Column Chart, but wraps data points around a circle rather than stretching them horizontally.
You can create this type of chart in the IgcDataChartComponent
control by binding your data to a IgcRadialColumnSeriesComponent
, as shown in the example below:
export class FootballPlayerStatsItem {
public constructor(init: Partial<FootballPlayerStatsItem>) {
Object.assign(this, init);
}
public attribute: string;
public ronaldo: number;
public messi: number;
}
export class FootballPlayerStats extends Array<FootballPlayerStatsItem> {
public constructor(items: Array<FootballPlayerStatsItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new FootballPlayerStatsItem(
{
attribute: `Dribbling`,
ronaldo: 8,
messi: 10
}),
new FootballPlayerStatsItem(
{
attribute: `Passing`,
ronaldo: 8,
messi: 10
}),
new FootballPlayerStatsItem(
{
attribute: `Finishing`,
ronaldo: 10,
messi: 10
}),
new FootballPlayerStatsItem(
{
attribute: `Free Kicks`,
ronaldo: 8,
messi: 9
}),
new FootballPlayerStatsItem(
{
attribute: `Penalties`,
ronaldo: 9,
messi: 7
}),
new FootballPlayerStatsItem(
{
attribute: `Physical`,
ronaldo: 10,
messi: 7
}),
new FootballPlayerStatsItem(
{
attribute: `Team Play`,
ronaldo: 7,
messi: 9
}),
new FootballPlayerStatsItem(
{
attribute: `Heading`,
ronaldo: 9,
messi: 6
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcDataChartCoreModule, IgcDataChartRadialModule, IgcDataChartRadialCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule, IgcLegendModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryAngleAxisComponent, IgcNumericRadiusAxisComponent, IgcRadialColumnSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
import { FootballPlayerStatsItem, FootballPlayerStats } from './FootballPlayerStats';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcDataChartCoreModule,
IgcDataChartRadialModule,
IgcDataChartRadialCoreModule,
IgcDataChartInteractivityModule,
IgcDataChartAnnotationModule,
IgcLegendModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcDataChartComponent
private angleAxis: IgcCategoryAngleAxisComponent
private radiusAxis: IgcNumericRadiusAxisComponent
private radialColumnSeries1: IgcRadialColumnSeriesComponent
private radialColumnSeries2: IgcRadialColumnSeriesComponent
private dataToolTipLayer: IgcDataToolTipLayerComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent;
var angleAxis = this.angleAxis = document.getElementById('angleAxis') as IgcCategoryAngleAxisComponent;
var radiusAxis = this.radiusAxis = document.getElementById('radiusAxis') as IgcNumericRadiusAxisComponent;
var radialColumnSeries1 = this.radialColumnSeries1 = document.getElementById('RadialColumnSeries1') as IgcRadialColumnSeriesComponent;
var radialColumnSeries2 = this.radialColumnSeries2 = document.getElementById('RadialColumnSeries2') as IgcRadialColumnSeriesComponent;
var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('dataToolTipLayer') as IgcDataToolTipLayerComponent;
this._bind = () => {
chart.legend = this.legend;
angleAxis.dataSource = this.footballPlayerStats;
radialColumnSeries1.dataSource = this.footballPlayerStats;
radialColumnSeries1.angleAxis = this.angleAxis;
radialColumnSeries1.valueAxis = this.radiusAxis;
radialColumnSeries2.dataSource = this.footballPlayerStats;
radialColumnSeries2.angleAxis = this.angleAxis;
radialColumnSeries2.valueAxis = this.radiusAxis;
}
this._bind();
}
private _footballPlayerStats: FootballPlayerStats = null;
public get footballPlayerStats(): FootballPlayerStats {
if (this._footballPlayerStats == null)
{
this._footballPlayerStats = new FootballPlayerStats();
}
return this._footballPlayerStats;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="legend-title">
Ronaldo vs Messi Player Stats
</div>
<div class="legend">
<igc-legend
name="legend"
id="legend"
orientation="Horizontal">
</igc-legend>
</div>
<div class="container fill">
<igc-data-chart
name="chart"
id="chart"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false">
<igc-category-angle-axis
name="angleAxis"
id="angleAxis"
label="attribute">
</igc-category-angle-axis>
<igc-numeric-radius-axis
name="radiusAxis"
id="radiusAxis"
inner-radius-extent-scale="0.1"
interval="2"
minimum-value="0"
maximum-value="10">
</igc-numeric-radius-axis>
<igc-radial-column-series
name="RadialColumnSeries1"
id="RadialColumnSeries1"
value-member-path="ronaldo"
show-default-tooltip="false"
area-fill-opacity="0.8"
thickness="3"
title="Ronaldo">
</igc-radial-column-series>
<igc-radial-column-series
name="RadialColumnSeries2"
id="RadialColumnSeries2"
value-member-path="messi"
show-default-tooltip="false"
area-fill-opacity="0.8"
thickness="3"
title="Messi">
</igc-radial-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
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 |
---|---|---|
Column | IgcCategoryChartComponent |
chartType = Column |
Radial Column | IgcDataChartComponent |
IgcRadialColumnSeriesComponent |
Range Column | IgcDataChartComponent |
IgcRangeColumnSeriesComponent |
Stacked Column | IgcDataChartComponent |
IgcStackedColumnSeriesComponent |
Stacked 100% Column | IgcDataChartComponent |
IgcStacked100ColumnSeriesComponent |
Waterfall | IgcDataChartComponent |
IgcWaterfallSeriesComponent |