Bubble Chart API
Complete API reference for the Bubble Chart, including data format, configuration options, custom parts, and context methods.
Data Format
Each dataset contains a series of data points with x/y coordinates, a bubble size value, and a label.
type BubbleChartData = {
datasets: {
legend: string;
data: { x: number; y: number; value: number; label: string }[];
}[];
};AG Style Config
Bubble
| Property | Type | Default | Description |
|---|---|---|---|
| bubble.minRadius | number | 3 | Minimum bubble radius in pixels. |
| bubble.maxRadius | number | 25 | Maximum bubble radius in pixels. |
| bubble.opacity | number | 0.7 | Fill opacity of bubbles (0 to 1). |
Toast Style Config
Bubble
| Property | Type | Default | Description |
|---|---|---|---|
| bubble.minRadius | number | 5 | Minimum bubble radius in pixels. |
| bubble.maxRadius | number | 50 | Maximum bubble radius in pixels. |
| bubble.opacity | number | 0.6 | Fill opacity of bubbles (0 to 1). |
Custom Parts
Override any visual element by providing a custom builder function: (args, context) => Widget
| Part | Args | Description |
|---|---|---|
| bubble | { value: number; label: string; legend: string; index: number; isHovered: boolean } | Individual bubble 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 | { bubbles: { widget: Widget; x: number; y: number }[]; scale: BubbleChartScale } | Container for all bubble widgets. |
| 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 bubble 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: BubbleChartContext
Available in every custom builder via the second argument.
| Name | Type | Kind | Description |
|---|---|---|---|
| data | BubbleChartData | 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 | BubbleChartScale | null | property | Computed scale with x, y, and value ranges. |
| hiddenSeries | ReadonlySet<string> | property | Set of currently hidden series. |
| hoveredBubble | { index: number; legend: string } | null | property | Currently hovered bubble 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. |
| hoverBubble(index, legend) | (index: number, legend: string) => void | method | Set hover state on a bubble. |
| unhoverBubble(index, legend) | (index: number, legend: string) => void | method | Clear hover if the specified bubble is currently hovered. |
| unhoverAllBubbles() | () => void | method | Clear all bubble hover state. |
| isBubbleHovered(index, legend) | (index: number, legend: string) => boolean | method | Check if a specific bubble is hovered. |
| setSize(width, height) | (width: number, height: number) => void | method | Update chart dimensions. |
Custom Part Example
import { ToastBubbleChart } from "@/components/flitter/charts/toast-bubble-chart";
<ToastBubbleChart
data={data}
config={{
bubble: { minRadius: 8, maxRadius: 40, opacity: 0.5 },
}}
/>