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

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

BubbleSeries

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

Bubble

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

BubbleLabel

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