Web Components Composite / Combo Chart
The Ignite UI for Web Components Composite Chart, also called a Combo Chart, is visualization that combines different types of chart types in the same plot area. It is very useful when presenting two data series that have a very different scale and might be expressed in different units. The most common example is dollars on one axis and percentage on the other axis.
Web Components Composite / Combo Example
The following example demonstrates how to create Composite Chart using IgcColumnSeriesComponent and IgcLineSeriesComponent in the IgcDataChartComponent control.
import { IgcCalloutLayerModule, IgcDataChartAnnotationModule, IgcDataChartCategoryCoreModule, IgcNumberAbbreviatorModule,
IgcDataChartCategoryModule, IgcDataChartCoreModule, IgcDataChartInteractivityModule, IgcLegendModule,
IgcDataChartComponent, IgcLegendComponent, IgcCalloutLayerComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
ModuleManager.register(
IgcDataChartCoreModule,
IgcDataChartCategoryCoreModule,
IgcDataChartCategoryModule,
IgcDataChartInteractivityModule,
IgcDataChartAnnotationModule,
IgcCalloutLayerModule,
IgcNumberAbbreviatorModule,
IgcLegendModule
);
export class DataChartCompositeChart {
private chart: IgcDataChartComponent;
private data : any[] = [];
private legend: IgcLegendComponent;
constructor() {
this.chart = document.getElementById('chart') as IgcDataChartComponent;
this.legend = document.getElementById('legend') as IgcLegendComponent;
this.chart.legend = this.legend;
this.initData();
this.chart.dataSource = this.data;
}
public formatNumber(num: number): string {
var ret = num;
if (num >= 1000000) return (num / 1000000.0).toFixed(1) + "M";
if (num >= 1000) return (num / 1000.0).toFixed(1) + "K";
return ret.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
public initData(){
this.data = [
{ Date: "Jan 1, 2019", Revenue: 16914, Expenses: 10183 },
{ Date: "Mar 1, 2019", Revenue: 15077, Expenses: 12813 },
{ Date: "Jun 1, 2019", Revenue: 16886, Expenses: 14476 },
{ Date: "Sep 1, 2019", Revenue: 17652, Expenses: 11705 },
{ Date: "Jan 1, 2020", Revenue: 21082, Expenses: 14044 },
{ Date: "Mar 1, 2020", Revenue: 17737, Expenses: 12803 },
{ Date: "Jun 1, 2020", Revenue: 18687, Expenses: 13677 },
{ Date: "Sep 1, 2020", Revenue: 21470, Expenses: 13717 },
{ Date: "Jan 1, 2021", Revenue: 28072, Expenses: 17133 }
];
for (let i = 0; i < this.data.length; i++) {
const item = this.data[i];
item.Revenue = item.Revenue * 1000;
item.Expenses = item.Expenses * 1000;
item.Income = item.Revenue - item.Expenses;
item.IncomePerRevenue = (item.Income / item.Revenue) * 100;
// calculating x-offset for callouts
item.RevenueX = i;
item.ExpensesX = i + 0.5;
// formatting values for callouts
item.FormattedRevenue = "$" + this.formatNumber(item.Revenue);
item.FormattedIncome = "$" + this.formatNumber(item.Income);
item.FormattedExpenses = "$" + this.formatNumber(item.Expenses);
item.FormattedProfit = item.IncomePerRevenue + "%";
}
}
}
new DataChartCompositeChart();
ts<!DOCTYPE html>
<html>
<head>
<title>DataChartCompositeChart</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="options vertical">
<span class="legend-title">Facebook Statement of Income 2019-2020</span>
<igc-legend id="legend" orientation="Horizontal"></igc-legend>
</div>
<div class="container" style="height: calc(100% - 3rem)">
<igc-data-chart id="chart" width="100%" height="100%"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false">
<igc-category-x-axis id="xAxis" name="xAxis" label="Date" overlap="0" gap="0.1" use-clustering-mode="true"></igc-category-x-axis>
<igc-numeric-y-axis id="yAxis" name="yAxis" abbreviate-large-numbers="true" title="In Millions of U.S. Dollars"
minimum-value="0" maximum-value="30000000" title-left-margin="5" title-right-margin="0">
</igc-numeric-y-axis>
<igc-numeric-y-axis id="yAxis2" name="yAxis2" abbreviate-large-numbers="true" title="Percentage" major-stroke-thickness="0"
minimum-value="0" maximum-value="160" label-location="OutsideRight" label-horizontal-alignment="Left">
</igc-numeric-y-axis>
<igc-column-series name="series1" x-axis-name="xAxis" y-axis-name="yAxis" value-member-path="Revenue"
title="Revenue" marker-type="Hidden"></igc-column-series>
<igc-column-series name="series2" x-axis-name="xAxis" y-axis-name="yAxis" value-member-path="Expenses"
title="Expenses" marker-type="Hidden"></igc-column-series>
<igc-spline-area-series name="series3" x-axis-name="xAxis" y-axis-name="yAxis2" value-member-path="IncomePerRevenue"
title="Income / Revenue %" marker-type="Circle">
</igc-spline-area-series>
<igc-callout-layer is-auto-callout-behavior-enabled="false" target-series-name="series1" x-member-path="RevenueX" y-member-path="Revenue" label-member-path="FormattedRevenue" use-value-for-auto-callout-labels="false"
callout-leader-brush="Transparent" callout-text-color="Black" callout-background="Transparent" callout-position-padding="-5">
</igc-callout-layer>
<igc-callout-layer is-auto-callout-behavior-enabled="false" target-series-name="series2" x-member-path="ExpensesX" y-member-path="Expenses" label-member-path="FormattedExpenses" use-value-for-auto-callout-labels="false"
callout-leader-brush="Transparent" callout-text-color="Black" callout-background="Transparent" callout-position-padding="-5">
</igc-callout-layer>
<igc-callout-layer is-auto-callout-behavior-enabled="true" target-series-name="series3" use-value-for-auto-callout-labels="true"
callout-leader-brush="Transparent" callout-text-color="Black" callout-background="LightGray"
auto-callout-label-precision="1">
</igc-callout-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.
Additional Resources
