Docs chevron_right Installation

Installation

Set up bubble-chart-js in your project. Our library is designed to be lightweight, zero-dependency, and works across all modern JS frameworks.

Package Manager

Install the library using your preferred package manager.

terminal

npm install bubble-chart-js

Basic usage

Import the BubbleChart class and initialize it with a target container and data configuration.

javascript

import { BubbleChart } from 'bubble-chart-js';

// 1. Define your data
const data = [
  { id: 1, value: 120, label: 'Atmospheric' },
  { id: 2, value: 80, label: 'Luminous' }
];

// 2. Initialize the engine
const chart = new BubbleChart({
  container: '#chart-canvas',
  data: data,
  renderer: 'canvas',
  physics: {
    strength: -30,
    friction: 0.9
  }
});

chart.render();

API Reference

Option	Type	Default	Description
container	String \| Element	null	Selector or DOM element where the chart will mount.
data	Array<Object>	[]	The dataset to visualize. Requires 'id' and 'value'.
renderer	'canvas' \| 'svg'	'canvas'	The engine used for drawing. SVG recommended for < 50 nodes.
physics	Object	{...}	Configuration for the force-directed layout engine.
seed	Number \| String	Date.now()	Randomization seed for consistent layout reproduction.

info

Pro Tip: Performance Scaling

For datasets larger than 1,000 nodes, we highly recommend switching the renderer to 'canvas' and setting physics.strength to -10 to reduce computation overhead.