BubbleChart

Packed circle chart using D3 circle-packing layout. Bubble size is proportional to data value. Supports labels, gradients, masks, and custom bubble rendering.

Import

import { BubbleChart, BubbleSeries, Bubble, BubbleLabel } from 'reaviz';

BubbleChart Props

BubbleSeries Props

Bubble Props

BubbleLabel Props

Basic Usage

const data = [
  { key: 'AWS', data: 100 },
  { key: 'SendGrid', data: 45 },
  { key: 'Okta', data: 75 },
  { key: 'Twilio', data: 25 },
];

<BubbleChart
  width={450}
  height={350}
  data={data}
/>

With Gradient

import { Gradient } from 'reaviz';

<BubbleChart
  data={data}
  series={
    <BubbleSeries
      bubble={<Bubble gradient={<Gradient />} />}
    />
  }
/>

With Pattern Mask

import { Stripes } from 'reaviz';

<BubbleChart
  data={data}
  series={
    <BubbleSeries
      bubble={<Bubble mask={<Stripes />} />}
    />
  }
/>

Custom Label Format

<BubbleChart
  data={data}
  series={
    <BubbleSeries
      label={<BubbleLabel format={(d) => `${d.data.key}: ${d.data.data}`} />}
    />
  }
/>

Custom Bubble Rendering (Icons)

<BubbleChart
  data={data}
  series={
    <BubbleSeries
      format={(item) => (
        <Bubble
          tooltip={<ChartTooltip />}
          // render custom content inside bubble
        />
      )}
    />
  }
/>

No Animation

<BubbleChart
  data={data}
  series={<BubbleSeries animated={false} />}
/>

Notes

• Uses D3 pack layout to compute circle positions and sizes
• Label text color is automatically inverted from the bubble fill for contrast
• Long labels wrap by default within the bubble bounds
• Autosize: omit width/height and the chart fills its container