React Scatter Spline 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 connected with a spline, each having a pair of numeric X/Y values that determines its location in the Cartesian coordinate system.

The IgrScatterSplineSeries 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 IgrScatterSplineSeries organizes and plots data chronologically (even if the data is not in chronological order before binding) on X-Axis and Y-Axis.

React Scatter Spline 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 IgrScatterSplineSeries.

Required Data

The IgrScatterSplineSeries 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 IgrScatterSplineSeries requires the following modules:

// axis' modules:
import { IgrNumericYAxis } from 'igniteui-react-charts';
import { IgrNumericXAxis } from 'igniteui-react-charts';
// series' modules:
import { IgrScatterSplineSeries } 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:

Code Example

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

    {/* axes */}
    <IgrNumericXAxis name="xAxis" isLogarithmic="true"/>
    <IgrNumericYAxis name="yAxis" isLogarithmic="true"/>
    {/* series: */}
     yMemberPath="GdpTotal" />
const series1 = new IgrScatterSplineSeries({ 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();

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.

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

Additional Resources