BubbleChart

Live preview

Loading example…

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

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

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

Usage

<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

Source

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