Bubble Chart

A Bubble Chart visualizes data using circles ('bubbles'), where the size represents a numerical value, allowing comparison of multiple data points across two axes. It shows three dimensions of data using x and y coordinates for positioning and bubble size for value.

Where to use:

Show Relationships: Ideal for showing relationships and comparisons between items.
Display Multiple Data Points: Useful in scientific and statistical data.
Visualize Patterns: Great for revealing patterns and correlations in data.

Quick Start

To create a bubble chart, use import the BubbleChart and give it data. The chart will automatically configure itself with the default options exposed via props.

import { BubbleChart } from 'reaviz';


export default function App() {
  return (
    <BubbleChart
      height={300}
      width={300}
      data={[
        { key: 'AWS', data: 13 },
        { key: 'SendGrid', data: 7 },
        { key: 'Okta', data: 15 }
      ]}
    />
  );
}

import { BubbleChart } from 'reaviz';

export default function App() {
  return (
    <BubbleChart
      height={300}
      width={300}
      data={[
        { key: 'AWS', data: 13 },
        { key: 'SendGrid', data: 7 },
        { key: 'Okta', data: 15 }
      ]}
    />
  );
}

Examples

API

BubbleChart (opens in a new tab)

Prop	Description	Default
`data`	Data the chart will receive to render. `ChartShallowDataShape<ChartDataTypes \| [ChartDataTypes, ChartDataTypes]>[]`	`[]`
`series`	The series component that renders the arc components. `ReactElement<BubbleSeriesProps, FC<Partial<BubbleSeriesProps>>>`	`<BubbleSeries />`
`id`	Id of the chart. `string`
`width`	Width of the chart. If not provided will autosize. `number`
`height`	Height of the chart. If not provided will autosize. `number`
`margins`	Margins for the chart. `Margins`	`10`
`className`	Classnames for the chart. `string`
`containerClassName`	Classnames for the chart. `string`
`style`	Additional css styles. `StyleHTMLAttributes<SVGSVGElement>`
`center`	Center the chart. Used mainly internally. `boolean`
`centerX`	Center chart on X Axis only. Used mainly internally. `boolean`
`centerY`	Center chart on Y Axis only. Used mainly internally. `boolean`

BubbleSeries (opens in a new tab)

Prop	Description	Default
`id`	Id set by the parent. `string`
`data`	The internal data object built by d3 `HierarchyCircularNode<any>[]`
`animated`	Whether the chart is animated or not. `boolean`	`true`
`colorScheme`	Color scheme for the chart. `ColorSchemeType`	`cybertron`
`bubble`	Bubble element. `ReactElement<BubbleProps, FC<Partial<BubbleProps>>>`	`<Bubble />`
`format`	Bubble element. `(item: any) => ReactElement<BubbleProps, FC<Partial<BubbleProps>>>`
`label`	Label element. `ReactElement<BubbleLabelProps, FC<Partial<BubbleLabelProps>>>`	`<BubbleLabel />`

Bubble (opens in a new tab)

Prop	Description	Default
`id`	Id set by the parent. `string`
`data`	The internal data object built by d3 `HierarchyCircularNode<any>`
`fill`	Fill for the bubble. `string`
`animated`	Whether the chart is animated or not. `boolean`
`tooltip`	Tooltip element. `ReactElement<ChartTooltipProps, FC<Partial<ChartTooltipProps>>>`	`<ChartTooltip />`
`mask`	Mask element for the bubble. `ReactElement<MaskProps, FC<MaskProps>>`
`glow`	Glow styling for the bubble. `Glow`
`gradient`	Gradient shades for the bubble. `ReactElement<GradientProps, FC<Partial<GradientProps>>>`
`onClick`	Event for when the bubble is clicked. `(event: MouseEvent<SVGCircleElement, MouseEvent>, currentItem?: HierarchyCircularNode<any>) => void`
`onMouseEnter`	Event for when the mouse enters bubble. `(event: any) => void`
`onMouseLeave`	Event for when the mouse leaves the bubble. `(event: any) => void`

BubbleLabel (opens in a new tab)

Prop	Description	Default
`id`	Id set by the parent. `string`
`data`	The internal data object built by d3 `HierarchyCircularNode<any>`
`fontSize`	Font size of the text. `number`	`14`
`fontFamily`	Font family of the text. `string`	`sans-serif`
`fill`	Fill of the text. `string`
`wrap`	Should wrap text or not. `boolean`	`true`
`animated`	Whether the chart is animated or not. `boolean`
`format`	Format label. `(data: any) => any`

Bar List Funnel Chart