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
andyMemberPath
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;