bubbleChartJs is a lightweight, customizable JavaScript library for creating stacked bubble charts. It arranges bubbles based on their values, with the largest bubble positioned at the top and surrounding bubbles decreasing in size accordingly.
npm install bubble-chart-jsbubbleChartJs is a lightweight and customizable JavaScript library for creating stacked bubble charts, arranging bubbles by size with the largest at the top.
Multi-Dimensional Data Representation – Visualizes multiple datasets at once.
Better Group Comparisons – Highlights relationships between different categories.
Enhanced Readability – Shows data trends with layered or clustered bubbles.
Customizable & Interactive – Allows tooltips.
✔️ Supports stacked or grouped bubble layouts
✔️ Customizable bubble color
✔️ Fully compatible with JavaScript & Typescript
✔️ Interactive tooltips and hover effects
Financial Analysis – Display investment risks vs. returns for multiple assets.
Social Media Metrics – Visualize engagement levels across platforms.
Scientific Research – Show relationships in grouped experimental data.
Here’s an example of the bubble chart generated using this package:
You can install bubbleChartJs via npm:
``sh`
npm install bubble-chart-js
`js
import BubbleChart from "bubblechartjs";
const tooltipOptions = {
fontStyle: "italic",
fontWeight: 800,
textAlign: "center",
textDecoration: "underline",
textTransform: "uppercase",
fontColor: "#FFF",
};
const data = [
{
label: "Rocket Fuel Orders",
value: 207,
bubbleColor: "#ff5733",
fontColor: "#FFFFFF",
fontWeight: 600,
},
{
label: "Time Machine Repairs",
value: 154,
bubbleColor: "#c70039",
fontColor: "#FFF",
fontWeight: 600,
},
{
label: "AI Overlord Complaints",
value: 192,
bubbleColor: "#900c3f",
fontColor: "#000",
},
{
label: "Quantum Internet Activation",
value: 73,
bubbleColor: "#ffc300",
fontColor: "#000",
},
{
label: "Zero-Gravity Plumbing Issues",
value: 96,
bubbleColor: "#4caf50",
fontColor: "#000",
},
{
label: "Hologram Tech Support",
value: 119,
bubbleColor: "#ff8c00",
fontColor: "#000",
},
{
label: "Teleportation Delay Reports",
value: 87,
bubbleColor: "#03875c",
fontColor: "#000",
},
{
label: "Neural Chip Upgrades",
value: 163,
bubbleColor: "#3f51b5",
fontColor: "#000",
},
{
label: "Intergalactic Toll Fees",
value: 132,
bubbleColor: "#795548",
fontColor: "#000",
},
];
const chartOptions = {
canvasContainerId: "bubbleChart",
data: data,
fontSize: 10,
onBubbleClick: (bubbleData, event) => {
alert(You clicked on: ${bubbleData.label});
},
};
// Initialize chart
initializeChart(chartoptions);
`
The BubbleChart class accepts a configuration object with the following properties:
The BubbleChart class accepts a configuration object with the following properties:
| Property | Type | Required | Optional | Default |
| -------------------------------------------------------------------------------------- | ------------ | -------- | -------- | ----------- |
| canvasContainerId
ID of the container where the chart will be rendered | string | ✔️ Yes | ❌ No | - |data
|
Array of objects containing and value for each bubble | DataItem[] | ✔️ Yes | ❌ No | - |defaultBubbleColor
|
Default color used when bubble color is not provided | | ❌ No | ✔️ Yes | "#3498db" |fontSize
|
Font size for bubble labels | | ❌ No | ✔️ Yes | 14 |fontFamily
|
Font family used for text rendering | | ❌ No | ✔️ Yes | "Arial" |fontColor
|
Text color inside bubbles | | ❌ No | ✔️ Yes | "#ffffff" |minRadius
|
Minimum radius of a bubble | | ❌ No | ✔️ Yes | 10 |maxLines
|
Maximum number of lines allowed for text wrapping | | ❌ No | ✔️ Yes | 3 |textWrap
|
Enable or disable text wrapping inside bubbles | | ❌ No | ✔️ Yes | true |isResizeCanvasOnWindowSizeChange
|
Automatically resize chart on window resize | | ❌ No | ✔️ Yes | true |showToolTip
|
Toggle tooltip visibility | | ❌ No | ✔️ Yes | true |onBubbleClick
|
Callback fired when a bubble is clicked | | ❌ No | ✔️ Yes | -` |
✔️ Required: These properties must be provided.
✔️ Optional: If not provided, the default value will be used.
This project is licensed under the MIT License.
Contributions, issues, and feature requests are welcome!
---
Made with ❤️ by Pragadeesh