Scatter Area Chart

This topic explains, with code examples, how to use IgxScatterAreaSeriesComponent in the Angular data chart component. This series draws a colored surface based on a triangulation of X and Y data with a numeric value assigned to each point. This type of series is useful for rendering heat maps, magnetic field strength or Wi-Fi strength in an office. The IgxScatterAreaSeriesComponent works a lot like the IgxScatterContourSeriesComponent except that it represents data as interpolated and colored surface instead of contour lines connecting data points with the same values.

Demo

Required Axes

The Angular data chart component provides various types of axes but only IgxNumericYAxisComponent and IgxNumericYAxisComponent can be used with IgxScatterAreaSeriesComponent.

Required Data

The IgxScatterAreaSeriesComponent 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 3 numeric data columns which should be mapped to the xMemberPath, yMemberPath, and colorMemberPath properties.

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

this.state = { dataSource: SampleScatterData.create() }

Required Modules

The scatter area series requires the following modules:

// axis' modules:
import { IgxNumericYAxis } from "igniteui-angular-charts/ES5/igx-numeric-y-axis";
import { IgxNumericXAxis } from "igniteui-angular-charts/ES5/igx-numeric-x-axis";
// series' modules:
import { IgxScatterAreaSeries } from "igniteui-angular-charts/ES5/igx-scatter-area-series";
import { IgxCustomPaletteColorScale } from "igniteui-angular-charts/ES5/igx-custom-palette-color-scale";
import { ColorScaleInterpolationMode } from "igniteui-angular-charts/ES5/ColorScaleInterpolationMode";
// data chart's modules:

import { IgxDataChartCoreModule } from "igniteui-angular-charts/ES5/igx-data-chart-core-module";
import { IgxDataChartScatterCoreModule } from "igniteui-angular-charts/ES5/igx-data-chart-scatter-core-module";
import { IgxDataChartScatterModule } from "igniteui-angular-charts/ES5/igx-data-chart-scatter-module";

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

Code Example

This code demonstrates how to create an instance of data chart with IgxScatterAreaSeriesComponent and bind it to the 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-area-series
        name="series1"
        xAxisName="xAxis"
        yAxisName="yAxis"
        xMemberPath="X"
        yMemberPath="Y"
        colorMemberPath="Z">
    </igx-scatter-area-series>
 </igx-data-chart>

Color Scale

Use the colorScale property of theIgxScatterAreaSeriesComponent to resolve values of points and thus fill the surface of the series. The colors are smoothly interpolated around the shape of the surface by applying a pixel-wise triangle rasterizer to triangulation data. Because rendering of the surface is pixel-wise, the color scale uses colors instead of brushes.

The provided IgxCustomPaletteColorScaleComponent class should satisfy most coloring needs, but you can inherit from the colorScale abstract class and provide your own coloring logic.

The following table list properties of the IgxCustomPaletteColorScaleComponent affecting surface coloring of the IgxScatterAreaSeriesComponent.

  • Palette sets the collection of colors to select from or to interpolate between.
  • InterpolationMode sets the method getting a color from the Palette.
  • MaximumValue sets the highest value to assign a color. Any given value greater than this value will be Transparent.
  • MinimumValue sets the lowest value to assign a color. Any given value less than this value will be Transparent.

Additional Resources