Scatter Chart API
Complete API reference for the Scatter Chart, including data format, configuration options, custom parts, and context methods.
Data Format
Each dataset contains a series of x/y data points with labels.
type ScatterChartData = {
datasets: {
legend: string;
data: { x: number; y: number; label: string }[];
}[];
};AG Style Config
Scatter
| Property | Type | Default | Description |
|---|---|---|---|
| scatter.size | number | 10 | Diameter of scatter point in pixels. |
| scatter.strokeWidth | number | 2 | Stroke width of the scatter point border. |
Toast Style Config
Scatter
| Property | Type | Default | Description |
|---|---|---|---|
| scatter.size | number | 10 | Diameter of scatter point in pixels. |
| scatter.fill | boolean | false | Whether scatter points are filled or outlined. |
| scatter.strokeWidth | number | 2 | Stroke width of the scatter point border. |
Custom Parts
Override any visual element by providing a custom builder function: (args, context) => Widget
| Part | Args | Description |
|---|---|---|
| scatter | { label: string; legend: string; index: number; isHovered: boolean } | Individual scatter point element. |
| xAxis | { line: Widget; labels: Widget[]; tick: Widget } | The complete x-axis assembly. |
| yAxis | { line: Widget; labels: Widget[]; tick: Widget } | The complete y-axis assembly. |
| xAxisLabel | { name: string; index: number } | Individual x-axis label. |
| yAxisLabel | { name: string; index: number } | Individual y-axis label. |
| xAxisTick | undefined | X-axis tick mark. |
| yAxisTick | undefined | Y-axis tick mark. |
| xAxisLine | undefined | X-axis line. |
| yAxisLine | undefined | Y-axis line. |
| axisCorner | undefined | Corner element where x and y axes meet. |
| dataView | { scatters: { widget: Widget; x: number; y: number }[]; scale: ScatterChartScale } | Container for all scatter points. |
| layout | { title: Widget; legends: Widget[]; plot: Widget } | Top-level layout composing title, legends, and the plot area. |
| plot | { xAxis: Widget; yAxis: Widget; dataView: Widget; grid: Widget; axisCorner: Widget } | The plot area composing axes, data view, and grid. |
| legend | { name: string; index: number; isVisible: boolean } | Individual legend item. |
| title | undefined | Chart title element. |
| dataLabel | { x: number; y: number; value: number; label: string; legend: string } | Data label at a scatter point. |
| grid | { xLine: Widget; yLine: Widget } | Grid container. |
| gridXLine | undefined | Individual vertical grid line. |
| gridYLine | undefined | Individual horizontal grid line. |
| tooltip | { label: string; items: { legend: string; color: string; value: number }[] } | Tooltip content widget. |
Context: ScatterChartContext
Available in every custom builder via the second argument.
| Name | Type | Kind | Description |
|---|---|---|---|
| data | ScatterChartData | property | Current chart data (filtered by hidden series). |
| legends | string[] | property | All legend names from the raw data. |
| width | number | property | Current chart width in pixels. |
| height | number | property | Current chart height in pixels. |
| scale | ScatterChartScale | null | property | Computed scale with x and y ranges. |
| hiddenSeries | ReadonlySet<string> | property | Set of currently hidden series. |
| hoveredPoint | { index: number; legend: string } | null | property | Currently hovered point info. |
| config | TConfig | property | The resolved chart configuration object. |
| isSeriesVisible(legend) | (legend: string) => boolean | method | Check if a series is currently visible. |
| toggleSeries(legend) | (legend: string) => void | method | Toggle visibility of a series. |
| showSeries(legend) | (legend: string) => void | method | Show a hidden series. |
| hideSeries(legend) | (legend: string) => void | method | Hide a visible series. |
| showAllSeries() | () => void | method | Show all hidden series. |
| hoverPoint(index, legend) | (index: number, legend: string) => void | method | Set hover state on a point. |
| unhoverPoint(index, legend) | (index: number, legend: string) => void | method | Clear hover on a point. |
| unhoverAllPoints() | () => void | method | Clear all point hover state. |
| isPointHovered(index, legend) | (index: number, legend: string) => boolean | method | Check if a specific point is hovered. |
| setSize(width, height) | (width: number, height: number) => void | method | Update chart dimensions. |
Custom Part Example
import { ToastScatterChart } from "@/components/flitter/charts/toast-scatter-chart";
<ToastScatterChart
data={data}
config={{
scatter: { size: 14, fill: true },
}}
/>