Bubble Chart
Bubbles for x, y, size and category: area encodes size on a square-root scale and each category is a step on the grey ladder.
$149 once · every Pro piece
Labels never collide: a label sits inside its bubble when it fits, otherwise to the right, left, above or below, otherwise it is left out. Switch periods and every bubble glides to its new place and size over 500ms, leaving a dashed ash ring where it was that cools away, so you see what moved. Hovering lights one bubble in the accent and keeps its category forward while the others step back; an optional size-weighted trend line fades at both ends and re-fits when categories are hidden.
Install
npx shadcn@latest add @obsyde/bubble-chartNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { BubbleChart } from '@/components/obsyde/ember/bubble-chart/BubbleChart';
export function Example() {
return (
<BubbleChart />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/bubble-chart/BubbleChart.tsxcomponentember/bubble-chart/bubble-chart.cssstylesember/bubble-chart/BubbleChartDemo.tsxdemoember/viz-kit/viz-kit.csssharedember/viz-kit/Tooltip.tsxsharedember/viz-kit/focus.tssharedember/viz-kit/patterns.tsxsharedember/viz-kit/roll.tssharedember/shared/rolling-number.csssharedember/shared/spring.tssharedember/shared/accent.tssharedember/viz-kit/scale.tssharedember/viz-kit/motion.tssharedember/viz-kit/chart.tsxsharedember/shared/ember.csssharedember/viz-kit/touch.tssharedember/viz-kit/keyboard.tssharedember/viz-kit/size.tssharedember/viz-kit/States.tsxsharedember/viz-kit/shape.tssharedember/viz-kit/Legend.tsxsharedember/viz-kit/Grid.tsxsharedember/viz-kit/demo.tsxsharedember/viz-kit/demo.csssharedember/viz-kit/Axis.tsxshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
periodPeriod | 'first' | 'second' | 'first' |
bubblesBubbles | number | 18 |
labelsLabels | boolean | true |
trendTrend | 'none' | 'dashed' | 'gradient' | 'none' |
ghostMorph ghosts | boolean | true |
legendLegend | 'row' | 'none' | 'row' |
tooltipTooltip | 'panel' | 'none' | 'panel' |
patternPattern | 'none' | 'diagonal-up' | 'diagonal-down' | 'dots' | 'vertical' | 'crosshatch' | 'none' |
backgroundBackground | 'grid' | 'dots' | 'hatch' | 'none' | 'grid' |
revealReveal | 'grow' | 'none' | 'grow' |
statusStatus | 'ready' | 'loading' | 'empty' | 'ready' |
heightHeight | number | 320 |
seedSeed | number | 8 |