React Scatter Point Chart

The Ignite UI for React scatter point chart belongs to a group of scatter charts that use the Cartesian (x, y) coordinate system to plot data. This series is rendered as a collection of markers, each having a pair of numeric X/Y values that determines its location in the Cartesian coordinate system.

The IgrScatterSeries draws attention to uneven intervals or clusters of data. They can highlight the deviation of collected data from predicted results and they are often used to plot scientific and statistical data. The IgrScatterSeries organizes and plots data chronologically (even if the data is not in chronological order before binding) on X-Axis and Y-Axis.

React Scatter Point Chart Example

Edit on CodeSandbox

Required Axes

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

Required Data

The IgrScatterSeries 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 2 numeric data columns which should be mapped to the xMemberPath and yMemberPath properties

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

public dataSource: any[] = SampleScatterStats.getCountries();

Required Modules

Creation of the IgrScatterSeries requires the following modules:

// axis' modules:
import { IgrNumericYAxis } from 'igniteui-react-charts';
import { IgrNumericXAxis } from 'igniteui-react-charts';
// series' modules:
import { IgrScatterSeries } from 'igniteui-react-charts';
import { MarkerType } from 'igniteui-react-charts';
// data chart's modules:
import { IgrDataChart } from 'igniteui-react-charts';
import { IgrDataChartCoreModule } from 'igniteui-react-charts';
import { IgrDataChartScatterCoreModule } from 'igniteui-react-charts';
import { IgrDataChartScatterModule } from 'igniteui-react-charts';

// registering data chart's modules:
IgrDataChartCoreModule.register();
IgrDataChartScatterCoreModule.register();
IgrDataChartScatterModule.register();

Code Example

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

 <IgrDataChart
    dataSource={this.state.dataSource}
    width="500px"
    height="500px">
    {/* axes */}
    <IgrNumericXAxis name="xAxis" isLogarithmic="true"/>
    <IgrNumericYAxis name="yAxis" isLogarithmic="true"/>
    {/* series: */}
    <IgrScatterSeries
     name="series1"
     xAxisName="xAxis"
     yAxisName="yAxis"
     xMemberPath="population"
     yMemberPath="gdpTotal" />
 </IgrDataChart>
const series1 = new IgrScatterSeries({ name: "series1" });
series1.xAxisName = "xAxis";
series1.yAxisName = "yAxis";
series1.xMemberPath = "population";
series1.yMemberPath = "gdpTotal";

const xAxis = new IgrNumericXAxis({ name: "xAxis" });
const yAxis = new IgrNumericYAxis({ name: "yAxis" });

this.chart = new IgrDataChart({ name: "chart" });
this.chart.dataSource = SampleShapeData.create();
this.chart.axes.add(yAxis);
this.chart.axes.add(xAxis);
this.chart.series.add(series1);

Series Appearance

You can customize appearance of marker using the Markers properties as well as changing brush and thickness of line visuals between markers. This code snippet below demonstrate how to use these properties.

<IgrScatterSeries
 name="series1"
 brush="Purple"
 markerType="Square"
 markerBrush="White"
 markerOutline="Blue"
 thickness={2} />
const series1 = new IgrScatterSeries({ name: "series1" });
series1.markerType = MarkerType.Square;
series1.markerBrush = "White";
series1.markerOutline = "Blue";
series1.brush = "Purple";
series1.thickness = 2;

Additional Resources