Node / Charts · guide

Scatter chart

Current Apexify.js 6.0.0 documentation for Scatter chart.

apexify.jsRuntime: nodeCURRENTSince 6.0.0

1await painter.createChart('scatter', series, options);

Shares Cartesian helpers with linechart.ts (AxisConfig, grid, legend layout), so ticks, padding, and legend fit modes behave like line charts.

ScatterPoint

x, y, optional label.

ScatterSeries

Field	Purpose
`label`, `data`	Points.
`color`, `gradient`	Marker fill (gradient mapped like line strokes).
`markerSize`, `markerType`	`circle` \| `square` \| `diamond` \| `cross` \| `none`.
`opacity`	Per-series (overrides `options.points.opacity`**).
`correlation`	Trend line — `ScatterCorrelationConfig`.

ScatterCorrelationConfig

Key	Role
`show`	Draw trend under markers.
`type`	`auto` or `CorrelationType` (`linear`, `polynomial`, `exponential`, `logarithmic`, `none`).
`flatThreshold`	`auto` only — if Pearson **
`degree`	Polynomial degree.
`color`, `lineWidth`, `lineStyle`	Curve styling (`LineStyle` enum from line chart).

ScatterChartOptions

dimensions, appearance, axes.{x,y}, labels.title, legend (full cartesian set incl. fit/width), grid, points.opacity, axisPaddingRatio (extra range pad around data — default ~0.06).

Example — two clouds + auto trend

1await painter.createChart(2  'scatter',3  [4    {5      label: 'Experiment A',6      data: [7        { x: 1, y: 2.1 },8        { x: 2, y: 2.8 },9        { x: 3, y: 3.6 },10        { x: 4, y: 4.4 },11      ],12      markerType: 'circle',13      markerSize: 14,14      color: '#6366f1',15      correlation: { show: true, type: 'auto', lineWidth: 2, color: '#312e81' },16    },17    {18      label: 'Experiment B',19      data: [20        { x: 1, y: 5 },21        { x: 2, y: 4.2 },22        { x: 3, y: 3.5 },23      ],24      markerType: 'square',25      markerSize: 12,26      color: '#f97316',27      correlation: { show: true, type: 'linear', color: '#9a3412' },28    },29  ],30  {31    dimensions: { width: 760, height: 520 },32    axes: {33      x: { label: 'Dose', range: { min: 0, max: 5 } },34      y: { label: 'Response', range: { min: 0, max: 8 } },35    },36    grid: { show: true },37  }38);

#ScatterPoint

#ScatterSeries

##ScatterCorrelationConfig

#ScatterChartOptions

#Example — two clouds + auto trend

Related guides and reference

Next steps

ScatterPoint

ScatterSeries

ScatterCorrelationConfig

ScatterChartOptions

Example — two clouds + auto trend