bubbleChartJs

bubbleChartJs is a lightweight and customizable JavaScript library for creating stacked bubble charts, arranging bubbles by size with the largest at the top.

✨ Why Use a Stacked Bubble Chart?

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.

🔧 Features

✔️ Supports stacked or grouped bubble layouts

✔️ Customizable bubble color

✔️ Fully compatible with JavaScript & Typescript

✔️ Interactive tooltips and hover effects

📌 Use Cases

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.

🎨 Example Output

Here’s an example of the bubble chart generated using this package:

Installation

You can install bubbleChartJs via npm:

npm install bubble-chart-js

Usage

Basic Example

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);

Configuration Options

The BubbleChart class accepts a configuration object with the following properties:

Configuration Options

The BubbleChart class accepts a configuration object with the following properties:

✔️ Required: These properties must be provided. ✔️ Optional: If not provided, the default value will be used.

License

This project is licensed under the MIT License.

Contributions

Contributions, issues, and feature requests are welcome!

Made with ❤️ by Pragadeesh

📌 Changelog

All notable changes to this project will be documented in this file.

[Unreleased] - Initial Commit

🚀 Added

• Project Setup: Initialized the project with essential configurations.
• Stacked Bubble Chart: Added initial implementation for rendering stacked bubble charts.
• Project Structure: Organized code into modules (models, services, core, constants).
• Build Tools: Configured TypeScript, Webpack, and Prettier for a streamlined development workflow.
• Live Server Support: Ensured auto-compilation and live reloading for a better development experience.

📝 Note: This is the first commit to the repository. Future updates will include feature enhancements, bug fixes, and optimizations. Stay tuned! 🚀