Scatter Chart Card

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

'use client';
import {SourceChartPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceChartPreview id="scatter-chart-card"/>;}

Without bubbles

A supplied z value enables bubble sizing. Set bubble={false} to use equal-sized dots when a third measure is unnecessary or makes the chart harder to compare.

'use client';
import {SourceChartPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceChartPreview id="scatter-chart-card" bubble={false}/>;}

Data

Each series contains a label, points and optional color. Points use x, y, an optional size z, and an optional label for the hover header. The component derives group averages, legends and tiles. Supply ranges to populate the period dropdown.

'use client';
import {SourceChartPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceChartPreview id="scatter-chart-card" series={[{name:'Starter',color:'var(--color-chart-2)',points:[{x:12,y:80,z:20},{x:24,y:160,z:45}]}]}/>;}