Scatter Polygon Chart

The Ignite UI for Angular scatter polyline chart belongs to a group of shape charts that take an array of shapes (array or arrays of X/Y coordinates). This series renders that array of shapes as a collection of polygons in the Cartesian (x, y) system.

Scatter shape series are often used highlight regions in scientific data or they can be used to plot diagrams, blueprints, or even floor plan of buildings.

Demo

Required Axes

The Angular data chart component provides various types of axes but only the following types of axes can be used with IgxScatterPolygonSeriesComponent.

Required Data

The IgxScatterPolygonSeriesComponent has the following data requirements:

  • The data source must be an array or a list of data items.
  • The data source must contain at least one data item otherwise the chart will not render the scatter shape series.
  • All data items must contain at one shape data column (array or arrays of X/Y coordinates) which should be mapped to the shapeMemberPath property of scatter shape series.

You can use the SampleShapeData as data source which meets above data requirements.

public dataSource: any[] = SampleShapeData.create();

Required Modules

Creation of the IgxScatterPolygonSeriesComponent requires the following modules:

// axis' modules:
import { IgxNumericYAxis } from 'igniteui-angular-charts';
import { IgxNumericXAxis } from 'igniteui-angular-charts';
// series' modules:
import { IgxScatterPolygonSeries } from 'igniteui-angular-charts';
// data chart's modules:

import { IgxDataChartCoreModule } from 'igniteui-angular-charts';
import { IgxDataChartShapeCoreModule } from 'igniteui-angular-charts';
import { IgxDataChartShapeModule } from 'igniteui-angular-charts';

@NgModule({
    imports: [
        // ...
        IgxDataChartCoreModule,
        IgxDataChartShapeCoreModule,
        IgxDataChartShapeModule,
    ]
})
export class AppModule { /* ... */ }

Code Example

This code demonstrates how to create an instance the Ignite UI for Angular data chart with IgxScatterPolygonSeriesComponent and bind it to a data source.

 <igx-data-chart
    [dataSource]="dataSource"
    width="700px"
    height="500px">
    <igx-numeric-x-axis name="xAxis"></igx-numeric-x-axis>
    <igx-numeric-y-axis name="yAxis"></igx-numeric-y-axis>
    <igx-scatter-polygon-series
        name="series1"
        shapeMemberPath="Points"
        title="House Floor Plan"
        brush="Gray"
        outline="Black">
    </igx-scatter-polygon-series>
 </igx-data-chart>

 <igc-data-chart
    width="700px"
    height="500px">
    <igc-numeric-x-axis name="xAxis"></igx-numeric-x-axis>
    <igc-numeric-y-axis name="yAxis"></igx-numeric-y-axis>
    <igc-scatter-polygon-series
        name="series1"
        x-axis-name="xAxis"
        y-axis-name="yAxis"
        shape-member-path="Points"
        title="House Floor Plan"
        brush="Gray"
        outline="Black">
    </igc-scatter-polygon-series>
 </igc-data-chart>

Additional Resources