React Scatter Bubble Chart

This topic explains, with code examples, how to use scatter IgrBubbleSeries in the React data chart component. This series is similar to Scatter Marker Series which use the Cartesian (x, y) coordinate system to plot data. This series displays the data as a collection of scaled bubbles, each having a pair of numeric X/Y values that determines its location and 3rd value that determines its size.

React Scatter Bubble Chart Example

Edit on CodeSandbox

Required Axes

The React data chart component provides various types of axes but only IgrNumericYAxis and IgrNumericYAxis can be used with IgrBubbleSeries.

Required Data

The IgrBubbleSeries 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 radiusMemberPath properties

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

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

Required Modules

The scatter bubble series requires the following modules:

// axis' modules:
import { IgrNumericYAxis } from 'igniteui-react-charts';
import { IgrNumericXAxis } from 'igniteui-react-charts';
// series' modules:
import { IgrBubbleSeries } from 'igniteui-react-charts';
import { IgrSizeScale } from 'igniteui-react-charts';
import { IgrValueBrushScale } from 'igniteui-react-charts';
import { IgrCustomPaletteBrushScale } from 'igniteui-react-charts';
import { BrushSelectionMode } 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 data chart with IgrBubbleSeries and bind it to the data source.

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

const series1 = new IgrBubbleSeries({ name: "series1" });
series1.xAxisName = "xAxis";
series1.yAxisName = "yAxis";
series1.xMemberPath = "population";
series1.yMemberPath = "gdpTotal";
series1.radiusMemberPath = "gdpPerCapita";

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

Bubble Shapes

You can customize appearance of IgrBubbleSeries using the Markers properties as well as to change shape of bubbles to one of predefined shapes, for example:

<IgrBubbleSeries
 name="series1"
 markerType="Square"
 markerBrush="White"
 markerOutline="Blue"
/>
const series1 = new IgrBubbleSeries({ name: "series1" });
series1.markerType = MarkerType.Square;
series1.markerBrush = "White";
series1.markerOutline = "Blue";

Bubble Radius Scale

The radiusScale is an optional feature of IgrBubbleSeries that determines the sizes of bubbles. This feature is implemented through theIgrSizeScale object. When the radius scale is set, the smallest bubble will be equal to minimumValue, the largest bubble will be equal to maximumValue, and all the remaining bubbles will be scaled accordingly. The size scale can be either linear or logarithmic. When the radius scale is not set, each bubble’s size is equal to the value of data column mapped to radiusMemberPath property

const sizeScale = new IgrSizeScale({});
sizeScale.minimumValue = 10;
sizeScale.maximumValue = 60;
const series1 = new IgrBubbleSeries({ name: "series1" });
series1.radiusMemberPath = "GdpPerCapita";
series1.radiusScale = sizeScale;

Bubble Fill Scale

The fillScale is an optional feature which determines the color pattern within a single IgrBubbleSeries. This series supports the following fill scales:

  • IgrValueBrushScale uses a set of values from data column mapped to fillMemberPath property to determine an interpolated brush for bubbles. Also, it can have user-specified minimumValue and maximumValue. When a range is set on this scale, bubbles with values that fall outside the range do not get a brush from the brushes collection and are not colored.
  • IgrCustomPaletteBrushScale uses the index of a bubble marker to select a brush from the brushes collection. When the brushSelectionMode property is set to the Select enumerable value, the bubbles are colored sequentially and it is set to Interpolate, the brush is interpolated based on the bubble’s index and the number of brushes in the collection.
const brushScale = new IgrValueBrushScale({});
brushScale.brushes = ["#ffffff", "#b56ffc"];
brushScale.minimumValue = 10;
brushScale.maximumValue = 60;
// or
const brushScale = new IgrCustomPaletteBrushScale({});
brushScale.brushes = ["#ffffff", "#b56ffc"];
brushScale.brushSelectionMode = BrushSelectionMode.Interpolate;
const series1 = new IgrBubbleSeries({ name: "series1" });
series1.fillMemberPath = "GdpPerCapita";
series1.fillScale = brushScale;

Additional Resources