Web Components Shape Charts
The Ignite UI for Web Components Shape Charts are a group of charts that take array of shapes (array or arrays of X/Y points) and render them as collection of polygons or polylines in Cartesian (x, y) coordinate system. They are often used highlight regions in scientific data or they can be used to plot diagrams, blueprints, or even floor plan of buildings.
Web Components Scatter Polygon Chart
The Web Components Scatter Polygon Chart renders an array or array of arrays of polygons in the Cartesian (x, y) coordinate system using IgcScatterPolygonSeriesComponent
in the IgcDataChartComponent
control. This chart can be used to filled shapes of plot diagrams, blueprints, or even the floor plan of buildings.
You can create this type of chart in the IgcDataChartComponent
control by binding your data to a IgcScatterPolygonSeriesComponent
, as shown in the example below:
import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgcDataChartCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartShapeCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartShapeModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcScatterPolygonSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcScatterPolygonSeriesComponent } from 'igniteui-webcomponents-charts';
import { IgcStyleShapeEventArgs } from 'igniteui-webcomponents-charts';
import { DataContext } from 'igniteui-webcomponents-core';
import { html } from 'lit-html';
ModuleManager.register(
IgcDataChartCoreModule,
IgcDataChartShapeCoreModule,
IgcDataChartShapeModule,
IgcDataChartInteractivityModule,
IgcScatterPolygonSeriesModule
);
export class DataChartTypeScatterPolygonSeries {
constructor() {
this.onAirplaneShapesLoaded = this.onAirplaneShapesLoaded.bind(this);
this.onAirplaneSeatsLoaded = this.onAirplaneSeatsLoaded.bind(this);
this.createTooltip = this.createTooltip.bind(this);
fetch('https://static.infragistics.com/xplatform/json/airplane-shape.json')
.then((response) => response.json())
.then((data) => this.onAirplaneShapesLoaded(data));
fetch('https://static.infragistics.com/xplatform/json/airplane-seats.json')
.then((response) => response.json())
.then((data) => this.onAirplaneSeatsLoaded(data));
}
public onAirplaneShapesLoaded(jsonData: any[]) {
console.log('onAirplaneShapesLoaded');
let airplaneShapeSeries = (document.getElementById('airplaneShapeSeries') as IgcScatterPolygonSeriesComponent);
airplaneShapeSeries.dataSource = jsonData;
airplaneShapeSeries.renderSeries(false);
}
public onAirplaneSeatsLoaded(jsonData: any[]) {
console.log('onAirplaneSeatsLoaded');
let airplaneSeatSeries = (document.getElementById('airplaneSeatSeries') as IgcScatterPolygonSeriesComponent);
airplaneSeatSeries.styleShape = this.onStylingShape;
airplaneSeatSeries.dataSource = jsonData;
airplaneSeatSeries.tooltipTemplate = this.createTooltip;
airplaneSeatSeries.renderSeries(false);
}
public onStylingShape(sender: any, args: IgcStyleShapeEventArgs) {
args.shapeOpacity = 1.0;
args.shapeStrokeThickness = 0.5;
args.shapeStroke = "Black";
args.shapeFill = "White";
const itemRecord = args.item as any;
if (itemRecord.class === 'First') {
args.shapeFill = "DodgerBlue";
}
if (itemRecord.class === 'Business') {
args.shapeFill = "LimeGreen";
}
if (itemRecord.class === 'Premium') {
args.shapeFill = "Orange";
}
if (itemRecord.class === 'Economy') {
args.shapeFill = "Red";
}
if (itemRecord.status === 'Sold') {
args.shapeFill = 'Gray';
}
}
public createTooltip(context: any): any {
const dataContext = context as DataContext;
if (!dataContext) return null;
const dataItem = dataContext.item as any;
if (!dataItem) return null;
let tooltip = html`<div>
<div class='ui-tooltip-content'>
<div>Class: ${dataItem.class}</div>
<div>Seat: ${dataItem.seat}</div>
<div>Price: $${dataItem.price}</div>
<div>Status: ${dataItem.status}</div>
</div>`;
return tooltip;
}
}
new DataChartTypeScatterPolygonSeries();
ts<!DOCTYPE html>
<html>
<head>
<title>DataChartTypeScatterPolygonSeries</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" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/custom-legend.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="options horizontal">
<div class="legend-title">
<span>Airplane Seating Chart (Polygons)</span>
</div>
</div>
<div class="custom-legend">
<div><span style="background: DodgerBlue; "></span><label>First Class</label></div>
<div><span style="background: LimeGreen; "></span><label>Business Class</label></div>
<div><span style="background: Orange; "></span><label>Premium Class</label></div>
<div><span style="background: Red; "></span><label>Economy Class</label></div>
<div><span style="background: Gray; "></span><label>Sold Seat</label> </div>
<div><span style="background: LightGray; "></span><label>Airplane</label> </div>
</div>
<igc-data-chart id="chart" width="100%" height="100%"
is-horizontal-zoom-enabled="true"
is-vertical-zoom-enabled="true">
<igc-numeric-x-axis name="xAxis" minimum-value=-1000 maximum-value=1000 interval=200>
</igc-numeric-x-axis>
<igc-numeric-y-axis name="yAxis" minimum-value=-600 maximum-value=600 interval=200>
</igc-numeric-y-axis>
<igc-scatter-polygon-series
id="airplaneShapeSeries"
name="airplaneShapeSeries"
x-axis-name="xAxis"
y-axis-name="yAxis"
shape-member-path="points"
title="Airplane Shape"
thickness="0.5"
brush="LightGray"
outline="Black">
</igc-scatter-polygon-series>
<igc-scatter-polygon-series
id="airplaneSeatSeries"
name="airplaneSeatSeries"
x-axis-name="xAxis"
y-axis-name="yAxis"
shape-member-path="points"
title="Airplane Seats">
</igc-scatter-polygon-series>
</igc-data-chart>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>
html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.
Web Components Scatter Polyline Chart
The Web Components Scatter Polyline Chart renders an array or array of arrays of polylines in the Cartesian (x, y) coordinate system using IgcScatterPolylineSeriesComponent
in the IgcDataChartComponent
control. This chart can be used to outlines of plot diagrams, blueprints, or even the floor plan of buildings. Also, it can visualizes complex relationships between a large amount of elements.
You can create this type of chart in the IgcDataChartComponent
control by binding your data to a IgcScatterPolylineSeriesComponent
, as shown in the example below:
import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgcDataChartCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartShapeCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartShapeModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcScatterPolylineSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcScatterPolylineSeriesComponent } from 'igniteui-webcomponents-charts';
import { IgcStyleShapeEventArgs } from 'igniteui-webcomponents-charts';
import { DataContext } from 'igniteui-webcomponents-core';
import { html } from 'lit-html';
ModuleManager.register(
IgcDataChartCoreModule,
IgcDataChartShapeCoreModule,
IgcDataChartShapeModule,
IgcDataChartInteractivityModule,
IgcScatterPolylineSeriesModule
);
export class DataChartTypeScatterPolylineSeries {
constructor() {
this.onAirplaneShapesLoaded = this.onAirplaneShapesLoaded.bind(this);
this.onAirplaneSeatsLoaded = this.onAirplaneSeatsLoaded.bind(this);
this.createTooltip = this.createTooltip.bind(this);
fetch('https://static.infragistics.com/xplatform/json/airplane-shape.json')
.then((response) => response.json())
.then((data) => this.onAirplaneShapesLoaded(data));
fetch('https://static.infragistics.com/xplatform/json/airplane-seats.json')
.then((response) => response.json())
.then((data) => this.onAirplaneSeatsLoaded(data));
}
public onAirplaneShapesLoaded(jsonData: any[]) {
console.log('onAirplaneShapesLoaded');
let airplaneShapeSeries = (document.getElementById('airplaneShapeSeries') as IgcScatterPolylineSeriesComponent);
airplaneShapeSeries.dataSource = jsonData;
airplaneShapeSeries.renderSeries(false);
}
public onAirplaneSeatsLoaded(jsonData: any[]) {
console.log('onAirplaneSeatsLoaded');
let airplaneSeatSeries = (document.getElementById('airplaneSeatSeries') as IgcScatterPolylineSeriesComponent);
airplaneSeatSeries.styleShape = this.onStylingShape;
airplaneSeatSeries.dataSource = jsonData;
airplaneSeatSeries.tooltipTemplate = this.createTooltip;
airplaneSeatSeries.renderSeries(false);
}
public onStylingShape(sender: any, args: IgcStyleShapeEventArgs) {
args.shapeOpacity = 1.0;
args.shapeStrokeThickness = 1.0;
args.shapeStroke = "Black";
const itemRecord = args.item as any;
if (itemRecord.class === 'First') {
args.shapeStroke = "DodgerBlue";
}
if (itemRecord.class === 'Business') {
args.shapeStroke = "LimeGreen";
}
if (itemRecord.class === 'Premium') {
args.shapeStroke = "Orange";
}
if (itemRecord.class === 'Economy') {
args.shapeStroke = "Red";
}
if (itemRecord.status === 'Sold') {
args.shapeStroke = 'Gray';
}
}
public createTooltip(context: any): any {
const dataContext = context as DataContext;
if (!dataContext) return null;
const dataItem = dataContext.item as any;
if (!dataItem) return null;
let tooltip = html`<div>
<div class='ui-tooltip-content'>
<div>Class: ${dataItem.class}</div>
<div>Seat: ${dataItem.seat}</div>
<div>Price: $${dataItem.price}</div>
<div>Status: ${dataItem.status}</div>
</div>`;
return tooltip;
}
}
new DataChartTypeScatterPolylineSeries();
ts<!DOCTYPE html>
<html>
<head>
<title>DataChartTypeScatterPolylineSeries</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" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/custom-legend.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="options horizontal">
<div class="legend-title">
<span>Airplane Seating Chart (Polylines)</span>
</div>
</div>
<div class="custom-legend">
<div><span style="background: DodgerBlue; "></span><label>First Class</label></div>
<div><span style="background: LimeGreen; "></span><label>Business Class</label></div>
<div><span style="background: Orange; "></span><label>Premium Class</label></div>
<div><span style="background: Red; "></span><label>Economy Class</label></div>
<div><span style="background: Gray; "></span><label>Sold Seat</label> </div>
<div><span style="background: LightGray; "></span><label>Airplane</label> </div>
</div>
<igc-data-chart id="chart" width="100%" height="100%"
is-horizontal-zoom-enabled="true"
is-vertical-zoom-enabled="true">
<igc-numeric-x-axis name="xAxis" minimum-value=-1000 maximum-value=1000 interval=200>
</igc-numeric-x-axis>
<igc-numeric-y-axis name="yAxis" minimum-value=-600 maximum-value=600 interval=200>
</igc-numeric-y-axis>
<igc-scatter-polyline-series
id="airplaneShapeSeries"
name="airplaneShapeSeries"
x-axis-name="xAxis"
y-axis-name="yAxis"
shape-member-path="points"
title="Airplane Shape"
thickness="1"
brush="Black"
outline="Black">
</igc-scatter-polyline-series>
<igc-scatter-polyline-series
id="airplaneSeatSeries"
name="airplaneSeatSeries"
x-axis-name="xAxis"
y-axis-name="yAxis"
shape-member-path="points"
title="Airplane Seats">
</igc-scatter-polyline-series>
</igc-data-chart>
</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: