Scatterplots

API

Extends the base chart options. All options below are optional.

Name	Type	Default	Description
sizeAccessor	`Accessor \| string`	`() => 3`	Specifies the size of a data point. Can be either a string (name of size field per data object) or a function (returning a number for a given data object).
xRug	`boolean`	-	Whether or not to generate a rug for the x axis.
yRug	`boolean`	-	Whether or not to generate a rug for the y axis.

Examples

Simple Scatterplot

This is an example scatterplot, in which we have enabled rug plots on the y-axis by setting the rug option to true.

new ScatterChart({
  data: [points1],
  width: 500,
  height: 200,
  target: '#my-div',
  xAccessor: 'x',
  yAccessor: 'y',
  brush: 'xy',
  xRug: true,
  tooltipFunction: (point) => `${formatDecimal(point.x)} - ${formatDecimal(point.y)}`
})

Multi-Category Scatterplot

This scatterplot contains data of multiple categories.

new ScatterChart({
  data: points2.map((x: any) => x.values),
  legend: points2.map((x: any) => x.key),
  width: 500,
  height: 200,
  xAccessor: 'x',
  yAccessor: 'y',
  yRug: true,
  target: '#my-div',
  tooltipFunction: (point) => `${formatDecimal(point.x)} - ${formatDecimal(point.y)}`
})

Scatterplot with Size and Color

Scatterplots have xAccessor, yAccessor and sizeAccessor.

new ScatterChart({
  data: points2.map((x: any) => x.values),
  legend: points2.map((x: any) => x.key),
  width: 500,
  height: 200,
  target: '#my-div',
  xAccessor: 'x',
  yAccessor: 'y',
  sizeAccessor: (x: any) => Math.abs(x.w) * 3,
  tooltipFunction: (point) => `${formatDecimal(point.x)} - ${formatDecimal(point.y)}: ${formatDecimal(point.w)}`
})