# BubbleChart

> Bubble chart: x, y and a third value as the bubble's area (radius grows with the square root, so twice the value is twice the ink).

Source: https://ui.jcsoftdev.com/docs/components/bubble-chart

Bubble chart: x, y and a third value as the bubble's area (radius grows
with the square root, so twice the value is twice the ink). Labels sit
inside large bubbles and next to small ones; a size key explains the scale.

## Import

```ts
import { BubbleChart } from "@jcsoftdev/ui/charts";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/charts/bubble-chart`.

## Usage

```tsx
<BubbleChart
  title="Servicios: duración, ticket y volumen"
  series={[{ id: "servicios", name: "Servicios", points: services }]}
  xFormat={minutes}
  yFormat="currency"
  sizeFormat="integer"
  xAxis={{ title: "Duración media (min)" }}
  yAxis={{ title: "Ticket (S/)" }}
  sizeRange={[4, 34]}
  showLabels
  sizeLegend
  trendLine={false}
  height={360}
  grid
  tooltip
  loading={false}
  animate
  labels={spanishLabels}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `legend` | `boolean \| "top" \| "bottom"` |  |  |
| `title` * | `string` |  |  |
| `animate` | `boolean` |  |  |
| `className` | `string` |  |  |
| `grid` | `boolean` |  |  |
| `tooltip` | `boolean` |  |  |
| `series` * | `readonly XYSeries[]` |  |  |
| `height` | `number \| "fill"` |  |  |
| `aspectRatio` | `number` |  | Width / height ratio; sizes the drawing from the container width when `height` is not "fill". |
| `xFormat` | `ValueFormat` |  |  |
| `yAxis` | `DistributionAxisOptions` |  |  |
| `brush` | `XYBrush` |  | Rectangular brush over the plot (pointer drag plus keyboard). |
| `loading` | `boolean` |  |  |
| `labels` | `Partial<DistributionLabels>` |  |  |
| `yFormat` | `ValueFormat` |  |  |
| `sizeFormat` | `ValueFormat` |  |  |
| `xAxis` | `DistributionAxisOptions` |  |  |
| `trendLine` | `boolean` |  | Least-squares line per series, drawn over its x range. |
| `quadrants` | `QuadrantOptions` |  |  |
| `sizeRange` | `readonly [number, number]` |  |  |
| `xType` | `"time" \| "linear"` |  | "time": `x` is epoch milliseconds and the axis shows calendar ticks. |
| `jitter` | `number \| { x?: number; y?: number; }` |  | Deterministic displacement in pixels that separates overlapping points (a number applies to both axes). Tooltips still show the true values. |
| `seed` | `number` |  | Seed of the jitter, so points are stable between renders. |
| `renderer` | `"canvas" \| "svg"` |  | "canvas" paints the marks on a canvas for tens of thousands of points; axes, tooltip and keyboard stay SVG/HTML. Falls back to SVG when points carry images or `shading` is "shaded". |
| `shading` | `"flat" \| "shaded"` |  | "shaded" fills bubbles with an off-centre radial gradient so they read as spheres. |
| `showLabels` | `boolean` | `true` | Text labels next to (or inside) the points that have a `label`. |
| `sizeLegend` | `boolean` |  | Reference circles explaining the bubble sizes, under the plot. |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-bubblechart--default)
- [Barbers By Branch](/storybook/?path=/story/charts-bubblechart--barbers-by-branch)
- [With Quadrants](/storybook/?path=/story/charts-bubblechart--with-quadrants)
- [Shaded 3 D](/storybook/?path=/story/charts-bubblechart--shaded-3-d)
- [Without Labels](/storybook/?path=/story/charts-bubblechart--without-labels)
- [Narrow](/storybook/?path=/story/charts-bubblechart--narrow)
- [Loading](/storybook/?path=/story/charts-bubblechart--loading)
- [Empty](/storybook/?path=/story/charts-bubblechart--empty)

## Source

`packages/ui/src/charts/bubble-chart/bubble-chart.tsx`