Web Components Bar Chart
The Ignite UI for Web Components Bar Chart, Bar Graph, or Horizontal 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 horizontal bars with equal heights but different lengths. This chart is ideal for showing variations in the value of an item over time. Data is represented using a collection of rectangles that extend from the left to right of the chart towards the values of data points. Bar Chart is very similar to Column Chart except that Bar Chart renders with 90 degrees clockwise rotation and therefore it has horizontal orientation (left to right) while Column Chart has vertical orientation (up and down)
Web Components Bar Chart Example
You can create Web Components Bar Chart in the IgcDataChartComponent
control by binding your data sources to multiple IgcBarSeriesComponent
, 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, IgcDataChartCoreModule, IgcDataChartCategoryCoreModule, IgcDataChartCategoryModule, IgcDataChartInteractivityModule, IgcDataChartVerticalCategoryModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryYAxisComponent, IgcNumericXAxisComponent, IgcCategoryHighlightLayerComponent, IgcBarSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcLegendModule,
IgcDataChartCoreModule,
IgcDataChartCategoryCoreModule,
IgcDataChartCategoryModule,
IgcDataChartInteractivityModule,
IgcDataChartVerticalCategoryModule,
IgcDataChartAnnotationModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcDataChartComponent
private yAxis: IgcCategoryYAxisComponent
private xAxis: IgcNumericXAxisComponent
private categoryHighlightLayer: IgcCategoryHighlightLayerComponent
private barSeries1: IgcBarSeriesComponent
private barSeries2: IgcBarSeriesComponent
private tooltips: 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 categoryHighlightLayer = this.categoryHighlightLayer = document.getElementById('CategoryHighlightLayer') as IgcCategoryHighlightLayerComponent;
var barSeries1 = this.barSeries1 = document.getElementById('BarSeries1') as IgcBarSeriesComponent;
var barSeries2 = this.barSeries2 = document.getElementById('BarSeries2') as IgcBarSeriesComponent;
var tooltips = this.tooltips = document.getElementById('Tooltips') as IgcDataToolTipLayerComponent;
this._bind = () => {
chart.legend = this.legend;
yAxis.dataSource = this.highestGrossingMovies;
barSeries1.xAxis = this.xAxis;
barSeries1.yAxis = this.yAxis;
barSeries1.dataSource = this.highestGrossingMovies;
barSeries2.xAxis = this.xAxis;
barSeries2.yAxis = this.yAxis;
barSeries2.dataSource = this.highestGrossingMovies;
}
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-data-chart
name="Chart"
id="Chart">
<igc-category-y-axis
name="yAxis"
id="yAxis"
label="franchise"
use-enhanced-interval-management="true"
enhanced-interval-prefer-more-category-labels="true"
is-inverted="true"
gap="0.5"
overlap="-0.1">
</igc-category-y-axis>
<igc-numeric-x-axis
name="xAxis"
id="xAxis"
title="Billions of U.S. Dollars">
</igc-numeric-x-axis>
<igc-category-highlight-layer
name="CategoryHighlightLayer"
id="CategoryHighlightLayer">
</igc-category-highlight-layer>
<igc-bar-series
name="BarSeries1"
id="BarSeries1"
title="Total Revenue of Franchise"
value-member-path="totalRevenue"
show-default-tooltip="true"
is-transition-in-enabled="true"
is-highlighting-enabled="true">
</igc-bar-series>
<igc-bar-series
name="BarSeries2"
id="BarSeries2"
title="Highest Grossing Movie in Series"
value-member-path="highestGrossing"
show-default-tooltip="true"
is-transition-in-enabled="true"
is-highlighting-enabled="true">
</igc-bar-series>
<igc-data-tool-tip-layer
name="Tooltips"
id="Tooltips">
</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
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.
Bar Chart Recommendations
Are Web Components Bar Charts right for your project?
Web Components Bar Chart includes several variants based on your data or how you want to tell the correct story with your data. These include:
- Grouped Bar Chart
- Stacked Bar Chart
- Polar Bar Chart
- Stacked 100 Bar Chart
Bar Chart Use Cases
There are several common use cases for choosing a Bar Chart:
- You need to show trends over time or a numeric value change in a category of data.
- You need to compare data values of 1 or more data series.
- You want to show a part-to-whole comparison.
- You want to show top or bottom percentage of categories.
- Analyzing multiple data points grouped in sub-categories (Stacked Bar).
These use cases are commonly used for the following scenarios:
- Sales Management.
- Inventory Management.
- Stock Charts.
- Any String Value Comparing a Numeric Value or Time-Series Value.
Bar Chart Best Practices:
- Start you numeric Axis at 0.
- Use a single color for the bars.
- Be sure the space separating each bar is 1/2 the width of the bar itself.
- Be sure ranking or comparing ordered categories (items) are sorted in increasing or decreasing order.
- Right-align category values on the Y-Axis (left side labels of chart) for readability.
When Not to Use Bar Chart
- You have too much data so the Y-Axis can't fit in the space or is not legible.
- You need a detailed Time-Series analysis - consider a Line Chart with a Time-Series for this type of data.
Bar Chart Data Structure:
- The data source must be an array or a list of data items.
- The data source must contain at least one data item.
- The list must contain at least one data column (string or date time).
- The list must contain at least one numeric data column.
Web Components Bar Chart with Single Series
Bar Chart belongs to a group of Category Series and it is rendered using a collection of rectangles that extend from the left to right of the chart towards the values of data points. You can create this type of chart in the IgcDataChartComponent
control by binding your data to a IgcBarSeriesComponent
, as shown in the example below:
export class OnlineShoppingSearchesItem {
public constructor(init: Partial<OnlineShoppingSearchesItem>) {
Object.assign(this, init);
}
public x: number;
public y: number;
public label: string;
public percent: number;
public shop: string;
}
export class OnlineShoppingSearches extends Array<OnlineShoppingSearchesItem> {
public constructor(items: Array<OnlineShoppingSearchesItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new OnlineShoppingSearchesItem(
{
x: 63,
y: 0,
label: `63%`,
percent: 63,
shop: `Amazon`
}),
new OnlineShoppingSearchesItem(
{
x: 48,
y: 1,
label: `48%`,
percent: 48,
shop: `Search Engines`
}),
new OnlineShoppingSearchesItem(
{
x: 33,
y: 2,
label: `33%`,
percent: 33,
shop: `Retailer Sites`
}),
new OnlineShoppingSearchesItem(
{
x: 25,
y: 3,
label: `25%`,
percent: 25,
shop: `Marketplaces`
}),
new OnlineShoppingSearchesItem(
{
x: 21,
y: 4,
label: `21%`,
percent: 21,
shop: `Brand Website`
}),
new OnlineShoppingSearchesItem(
{
x: 10,
y: 5,
label: `10%`,
percent: 10,
shop: `Comparison Sites`
}),
new OnlineShoppingSearchesItem(
{
x: 8,
y: 6,
label: `8%`,
percent: 8,
shop: `Social Media`
}),
new OnlineShoppingSearchesItem(
{
x: 2,
y: 7,
label: `2%`,
percent: 2,
shop: `Other`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcDataChartCoreModule, IgcDataChartCategoryCoreModule, IgcDataChartCategoryModule, IgcDataChartAnnotationModule, IgcDataChartInteractivityModule, IgcDataChartVerticalCategoryModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartComponent, IgcCategoryYAxisComponent, IgcNumericXAxisComponent, IgcCategoryHighlightLayerComponent, IgcBarSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
import { OnlineShoppingSearchesItem, OnlineShoppingSearches } from './OnlineShoppingSearches';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcDataChartCoreModule,
IgcDataChartCategoryCoreModule,
IgcDataChartCategoryModule,
IgcDataChartAnnotationModule,
IgcDataChartInteractivityModule,
IgcDataChartVerticalCategoryModule
);
export class Sample {
private chart: IgcDataChartComponent
private yAxis: IgcCategoryYAxisComponent
private xAxis: IgcNumericXAxisComponent
private categoryHighlightLayer: IgcCategoryHighlightLayerComponent
private barSeries1: IgcBarSeriesComponent
private tooltips: IgcDataToolTipLayerComponent
private _bind: () => void;
constructor() {
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 categoryHighlightLayer = this.categoryHighlightLayer = document.getElementById('CategoryHighlightLayer') as IgcCategoryHighlightLayerComponent;
var barSeries1 = this.barSeries1 = document.getElementById('BarSeries1') as IgcBarSeriesComponent;
var tooltips = this.tooltips = document.getElementById('Tooltips') as IgcDataToolTipLayerComponent;
this._bind = () => {
yAxis.dataSource = this.onlineShoppingSearches;
barSeries1.xAxis = this.xAxis;
barSeries1.yAxis = this.yAxis;
barSeries1.dataSource = this.onlineShoppingSearches;
}
this._bind();
}
private _onlineShoppingSearches: OnlineShoppingSearches = null;
public get onlineShoppingSearches(): OnlineShoppingSearches {
if (this._onlineShoppingSearches == null)
{
this._onlineShoppingSearches = new OnlineShoppingSearches();
}
return this._onlineShoppingSearches;
}
}
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">
Where Online Shoppers Start Their Search
</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="shop"
use-enhanced-interval-management="true"
enhanced-interval-prefer-more-category-labels="true"
is-inverted="true"
gap="0.5"
overlap="-0.1">
</igc-category-y-axis>
<igc-numeric-x-axis
name="xAxis"
id="xAxis"
label-format="{0}%">
</igc-numeric-x-axis>
<igc-category-highlight-layer
name="CategoryHighlightLayer"
id="CategoryHighlightLayer">
</igc-category-highlight-layer>
<igc-bar-series
name="BarSeries1"
id="BarSeries1"
value-member-path="percent"
show-default-tooltip="true"
is-transition-in-enabled="true"
is-highlighting-enabled="true">
</igc-bar-series>
<igc-data-tool-tip-layer
name="Tooltips"
id="Tooltips">
</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 Bar Chart with Multiple Series
The Bar Chart is able to render multiple bars per category for comparison purposes. In this example, the Bar Chart is comparing box office revenue amongst popular movie franchises. You can create this type of chart in the IgcDataChartComponent
control by binding your data to multiple IgcBarSeriesComponent
, 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, IgcDataChartCoreModule, IgcDataChartCategoryCoreModule, IgcDataChartCategoryModule, IgcDataChartInteractivityModule, IgcDataChartVerticalCategoryModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryYAxisComponent, IgcNumericXAxisComponent, IgcCategoryHighlightLayerComponent, IgcBarSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcLegendModule,
IgcDataChartCoreModule,
IgcDataChartCategoryCoreModule,
IgcDataChartCategoryModule,
IgcDataChartInteractivityModule,
IgcDataChartVerticalCategoryModule,
IgcDataChartAnnotationModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcDataChartComponent
private yAxis: IgcCategoryYAxisComponent
private xAxis: IgcNumericXAxisComponent
private categoryHighlightLayer: IgcCategoryHighlightLayerComponent
private barSeries1: IgcBarSeriesComponent
private barSeries2: IgcBarSeriesComponent
private tooltips: 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 categoryHighlightLayer = this.categoryHighlightLayer = document.getElementById('CategoryHighlightLayer') as IgcCategoryHighlightLayerComponent;
var barSeries1 = this.barSeries1 = document.getElementById('BarSeries1') as IgcBarSeriesComponent;
var barSeries2 = this.barSeries2 = document.getElementById('BarSeries2') as IgcBarSeriesComponent;
var tooltips = this.tooltips = document.getElementById('Tooltips') as IgcDataToolTipLayerComponent;
this._bind = () => {
chart.legend = this.legend;
yAxis.dataSource = this.highestGrossingMovies;
barSeries1.xAxis = this.xAxis;
barSeries1.yAxis = this.yAxis;
barSeries1.dataSource = this.highestGrossingMovies;
barSeries2.xAxis = this.xAxis;
barSeries2.yAxis = this.yAxis;
barSeries2.dataSource = this.highestGrossingMovies;
}
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-data-chart
name="Chart"
id="Chart">
<igc-category-y-axis
name="yAxis"
id="yAxis"
label="franchise"
use-enhanced-interval-management="true"
enhanced-interval-prefer-more-category-labels="true"
is-inverted="true"
gap="0.5"
overlap="-0.1">
</igc-category-y-axis>
<igc-numeric-x-axis
name="xAxis"
id="xAxis"
title="Billions of U.S. Dollars">
</igc-numeric-x-axis>
<igc-category-highlight-layer
name="CategoryHighlightLayer"
id="CategoryHighlightLayer">
</igc-category-highlight-layer>
<igc-bar-series
name="BarSeries1"
id="BarSeries1"
title="Total Revenue of Franchise"
value-member-path="totalRevenue"
show-default-tooltip="true"
is-transition-in-enabled="true"
is-highlighting-enabled="true">
</igc-bar-series>
<igc-bar-series
name="BarSeries2"
id="BarSeries2"
title="Highest Grossing Movie in Series"
value-member-path="highestGrossing"
show-default-tooltip="true"
is-transition-in-enabled="true"
is-highlighting-enabled="true">
</igc-bar-series>
<igc-data-tool-tip-layer
name="Tooltips"
id="Tooltips">
</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 Bar Chart Styling
The Bar Chart can be styled, and allows for the ability to use annotation values for each bar, for example, to demonstrate percent comparisons. You can create this type of chart in the IgcDataChartComponent
control by binding your data to a IgcBarSeriesComponent
and adding a IgcCalloutLayerComponent
, as shown in the example below:
export class OnlineShoppingSearchesItem {
public constructor(init: Partial<OnlineShoppingSearchesItem>) {
Object.assign(this, init);
}
public x: number;
public y: number;
public label: string;
public percent: number;
public shop: string;
}
export class OnlineShoppingSearches extends Array<OnlineShoppingSearchesItem> {
public constructor(items: Array<OnlineShoppingSearchesItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new OnlineShoppingSearchesItem(
{
x: 63,
y: 0,
label: `63%`,
percent: 63,
shop: `Amazon`
}),
new OnlineShoppingSearchesItem(
{
x: 48,
y: 1,
label: `48%`,
percent: 48,
shop: `Search Engines`
}),
new OnlineShoppingSearchesItem(
{
x: 33,
y: 2,
label: `33%`,
percent: 33,
shop: `Retailer Sites`
}),
new OnlineShoppingSearchesItem(
{
x: 25,
y: 3,
label: `25%`,
percent: 25,
shop: `Marketplaces`
}),
new OnlineShoppingSearchesItem(
{
x: 21,
y: 4,
label: `21%`,
percent: 21,
shop: `Brand Website`
}),
new OnlineShoppingSearchesItem(
{
x: 10,
y: 5,
label: `10%`,
percent: 10,
shop: `Comparison Sites`
}),
new OnlineShoppingSearchesItem(
{
x: 8,
y: 6,
label: `8%`,
percent: 8,
shop: `Social Media`
}),
new OnlineShoppingSearchesItem(
{
x: 2,
y: 7,
label: `2%`,
percent: 2,
shop: `Other`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartCategoryCoreModule, IgcDataChartInteractivityModule, IgcDataChartVerticalCategoryModule, IgcAnnotationLayerProxyModule, IgcCalloutLayerModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartComponent, IgcCategoryYAxisComponent, IgcNumericXAxisComponent, IgcCategoryHighlightLayerComponent, IgcBarSeriesComponent, IgcCalloutLayerComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
import { OnlineShoppingSearchesItem, OnlineShoppingSearches } from './OnlineShoppingSearches';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcDataChartCoreModule,
IgcDataChartCategoryModule,
IgcDataChartCategoryCoreModule,
IgcDataChartInteractivityModule,
IgcDataChartVerticalCategoryModule,
IgcAnnotationLayerProxyModule,
IgcCalloutLayerModule,
IgcDataChartAnnotationModule
);
export class Sample {
private chart: IgcDataChartComponent
private yAxis: IgcCategoryYAxisComponent
private xAxis: IgcNumericXAxisComponent
private categoryHighlightLayer: IgcCategoryHighlightLayerComponent
private barSeries1: IgcBarSeriesComponent
private calloutLayer1: IgcCalloutLayerComponent
private tooltips: IgcDataToolTipLayerComponent
private _bind: () => void;
constructor() {
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 categoryHighlightLayer = this.categoryHighlightLayer = document.getElementById('CategoryHighlightLayer') as IgcCategoryHighlightLayerComponent;
var barSeries1 = this.barSeries1 = document.getElementById('BarSeries1') as IgcBarSeriesComponent;
var calloutLayer1 = this.calloutLayer1 = document.getElementById('CalloutLayer1') as IgcCalloutLayerComponent;
var tooltips = this.tooltips = document.getElementById('Tooltips') as IgcDataToolTipLayerComponent;
this._bind = () => {
yAxis.dataSource = this.onlineShoppingSearches;
barSeries1.xAxis = this.xAxis;
barSeries1.yAxis = this.yAxis;
barSeries1.dataSource = this.onlineShoppingSearches;
calloutLayer1.dataSource = this.onlineShoppingSearches;
}
this._bind();
}
private _onlineShoppingSearches: OnlineShoppingSearches = null;
public get onlineShoppingSearches(): OnlineShoppingSearches {
if (this._onlineShoppingSearches == null)
{
this._onlineShoppingSearches = new OnlineShoppingSearches();
}
return this._onlineShoppingSearches;
}
}
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">
Where Online Shoppers Start Their Search
</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="shop"
is-inverted="true"
gap="0.75">
</igc-category-y-axis>
<igc-numeric-x-axis
name="xAxis"
id="xAxis"
interval="20"
maximum-value="80"
minimum-value="0"
label-format="{0}%">
</igc-numeric-x-axis>
<igc-category-highlight-layer
name="CategoryHighlightLayer"
id="CategoryHighlightLayer">
</igc-category-highlight-layer>
<igc-bar-series
name="BarSeries1"
id="BarSeries1"
value-member-path="percent"
show-default-tooltip="true"
is-transition-in-enabled="true"
is-highlighting-enabled="true"
brush="rgba(134, 6, 138, 0.6470588235294118)"
outline="rgba(133, 6, 138, 1)"
thickness="2"
area-fill-opacity="0.5"
marker-type="Hidden">
</igc-bar-series>
<igc-callout-layer
name="CalloutLayer1"
id="CalloutLayer1"
is-auto-callout-behavior-enabled="true"
callout-text-color="rgba(133, 6, 138, 1)"
callout-background="rgba(0, 0, 0, 0)"
callout-leader-brush="rgba(0, 0, 0, 0)">
</igc-callout-layer>
<igc-data-tool-tip-layer
name="Tooltips"
id="Tooltips">
</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.
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.
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
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: