ChartScatter

The ChartScatter component displays data as a scatter plot with customizable styling, tooltips, and legends. Built with ApexCharts.

Demo

React

Vue

Usage

React

import { ChartScatter } from '@fintech-sandpit/ui/react';

const data = [
  { x: 10, y: 20, series: 'Team A' },
  { x: 15, y: 25, series: 'Team A' },
  { x: 20, y: 30, series: 'Team A' },
  { x: 12, y: 22, series: 'Team B' },
  { x: 18, y: 28, series: 'Team B' },
  { x: 22, y: 32, series: 'Team B' },
];

const series = [
  { name: 'Team A' },
  { name: 'Team B' },
];

return (
  <ChartScatter
    data={data}
    series={series}
    height="400px"
    showTooltip={true}
    showLegend={true}
  />
);

Vue

<script setup lang="ts">
import { ChartScatter } from '@fintech-sandpit/ui/vue';

const data = [
  { x: 10, y: 20, series: 'Team A' },
  { x: 15, y: 25, series: 'Team A' },
  { x: 20, y: 30, series: 'Team A' },
  { x: 12, y: 22, series: 'Team B' },
  { x: 18, y: 28, series: 'Team B' },
  { x: 22, y: 32, series: 'Team B' },
];

const series = [
  { name: 'Team A' },
  { name: 'Team B' },
];
</script>

<template>
  <ChartScatter
    :data="data"
    :series="series"
    height="400px"
    :show-tooltip="true"
    :show-legend="true"
  />
</template>

Props

ChartScatter

React

Name	Type	Default	Description
data	ChartScatterDataItem[]	—	Array of data points where each object contains x, y coordinates and series name
series	Array<{ name: string }>	—	Array of series objects defining which series to display
width	CssUnit	'100%'	Width of the chart container (CSS unit string like ‘100%’, ‘400px’, ‘50rem’)
height	CssUnit	'400px'	Height of the chart container (CSS unit string like ‘400px’, ‘50vh’)
legendPosition	LegendPosition	'bottom'	Position of the legend
showTooltip	boolean	true	Whether to display tooltips on hover
showLegend	boolean	true	Whether to display the legend
colors	string[]	—	Array of colors for the chart points

Vue

Name	Type	Default	Description
data	ChartScatterDataItem[]	—	Array of data points where each object contains x, y coordinates and series name
series	Array<{ name: string }>	—	Array of series objects defining which series to display
width	CssUnit	'100%'	Width of the chart container (CSS unit string like ‘100%’, ‘400px’, ‘50rem’)
height	CssUnit	'400px'	Height of the chart container (CSS unit string like ‘400px’, ‘50vh’)
legend-position	LegendPosition	'bottom'	Position of the legend
show-tooltip	boolean	true	Whether to display tooltips on hover
show-legend	boolean	true	Whether to display the legend
colors	string[]	—	Array of colors for the chart points

Types

type CssUnit = `${number}${'px' | 'em' | 'rem' | 'vw' | 'vh' | 'vmin' | 'vmax' | '%'}`

type LegendPosition = 'top' | 'bottom' | 'left' | 'right'

type ChartScatterDataItem = {
  x: number;
  y: number;
  series: string;
}