React Scatter Line Chart

The Ignite UI for React scatter line 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 straight line, each having a pair of numeric X/Y values that determines its location in the Cartesian coordinate system.

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

React Scatter Line Chart Example

Required Axes

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

Required Data

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

// axis' modules:
import { IgrNumericYAxis } from 'igniteui-react-charts';
import { IgrNumericXAxis } from 'igniteui-react-charts';
// series' modules:
import { IgrScatterLineSeries } 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 IgrScatterLineSeries 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: */}
    <IgrScatterLineSeries
     name="series1"
     xAxisName="xAxis"
     yAxisName="yAxis"
     xMemberPath="Population"
     yMemberPath="GdpTotal" />
 </IgrDataChart>

const series1 = new IgrScatterLineSeries({ 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.

<IgrScatterLineSeries
 name="series1"
 brush="Purple"
 markerType="Square"
 markerBrush="White"
 markerOutline="Blue"
 thickness={2} />

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

React Scatter Line Chart