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:

EXAMPLE

TS

HTML

CSS

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コピー

Edit in: Codesandbox

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:

EXAMPLE

TS

HTML

CSS

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コピー

Edit in: Codesandbox

Additional Resources

You can find more information about related chart types in these topics:

• Area Chart
• Line Chart
• Scatter Chart

API References

The following table lists API members mentioned in the above sections:

• IgcDataChartComponent
• IgcScatterPolygonSeriesComponent
• IgcScatterPolylineSeriesComponent
• ItemsSource
• shapeMemberPath
• IgcNumericXAxisComponent
• IgcNumericYAxisComponent
• YAxisName
• XAxisName