Version: 1.2.0

Bubble Chart

A bubble chart is a data visualization that displays multiple circles (bubbles) in a two-dimensional plot. It is built with d3. Here's a preview:

Live Editor

Usage

1 . Import the BubbleChart component after installation.

import { BubbleChart } from "@k2/d3-viz";

2 . Add data or URL to the BubbleChart component.

<BubbleChart data={BubbleChartData} />
// or
<BubbleChart url="server/api/data" />

Examples

Bubble Chart with animation: Demo

<BubbleChart
  data={[
    {
      color: "#ffb964",
      name: "Android",
      value: 10,
    },
    {
      color: "#a26be9",
      name: "A.Tablet",
      value: 10,
    },
    {
      color: "#6098f3",
      name: "iPhone",
      value: 65,
    },
    {
      color: "#71af4f",
      name: "iPad",
      value: 15,
    },
  ]}
  height={400}
  width={500}
/>

Bubble Chart with Legends: Demo

<BubbleChart
  data={[
    {
      color: "#ffb964",
      name: "Android",
      value: 10,
    },
    {
      color: "#a26be9",
      name: "A.Tablet",
      value: 10,
    },
    {
      color: "#6098f3",
      name: "iPhone",
      value: 65,
    },
    {
      color: "#71af4f",
      name: "iPad",
      value: 15,
    },
  ]}
  height={400}
  width={500}
/>

Bubble Chart with Classes: Demo

<BubbleChart
  classes={{ root: "myClassName" }}
  data={[
    {
      color: "#ffb964",
      name: "Android",
      value: 10,
    },
    {
      color: "#a26be9",
      name: "A.Tablet",
      value: 10,
    },
    {
      color: "#6098f3",
      name: "iPhone",
      value: 65,
    },
    {
      color: "#71af4f",
      name: "iPad",
      value: 15,
    },
  ]}
  height={400}
  width={500}
/>

Bubble Chart with data from API endpoint:

<BubbleChart url="server/api/data" />

Props

Property	Type	Required	Default value	Description
data	Bubble[]	yes		Data for the chart.
title	string \| JSX.Element	no	None	Title of the chart.
animate	boolean	no	true	Enable the animation.
label	boolean \| LabelComponent	no	true	Enable or customize the labels.
legends	boolean \| LegendsProps	no	true	Enable or customize the legends.
tooltip	boolean \| TooltipProps	no	true	Enable or customize the tooltip.
colors	{[theme-mode: e.g "light" or "dark"] : string[] }	no	None	Colors of visual in different theme modes
onClick	(event: {data:Bubble) ⇒ void	no	None	Callback for bubble click.
width	number	no	400	Width of the chart.
height	number	no	300	Height of the chart.
style	CSSProperties	no	None	Styles applied to the root element of chart.
className	string	no	None	Class applied to the root element of chart.
classes	Classes	no	true	Classes of chart.

BubbleChart is wrapped with fetchData HoC, to perform data handling tasks, which adds support for some additional props.

Custom Types

BubbleChartData

Here is the format of the data accepted by the BubbleChart component.

type Bubble = {
  name: string | number,
  color?: string,
  labelColor?: string,
  value: number,
};

LabelComponent

This is a type of custom label component. You can create a custom label component by this.

type LabelComponent = (obj: { data: Bubble, radius: number }) => JSX.Element;

Classes

Classes enable customization and styling of chart elements through their classes.

ClassName	Type	Required	Default value	Description
root	string	no	None	Applied to root element of chart.
header	string	no	None	Applied to header of chart.
title	string	no	None	Applied to title of chart.
legends	string	no	None	Applied to legends of chart.
tooltip	string	no	None	Applied to tooltip of chart.
chart	string	no	None	Applied to svg component of chart.
bubble	string	no	None	Applied to bubbles of chart.
label	string	no	None	Applied to labels of chart.

Please see Class Specificity for correctly defining it.

Usage#

Examples#

Props#

Custom Types#

BubbleChartData#

LabelComponent#

Classes#