bubble-chart-js 1.0.17 → 1.0.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +61 -25
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,7 +1,41 @@
|
|
|
1
|
-
#
|
|
1
|
+
# bubble-chart-js
|
|
2
2
|
|
|
3
3
|
bubbleChartJs is a lightweight and customizable JavaScript library for creating stacked bubble charts, arranging bubbles by size with the largest at the top.
|
|
4
4
|
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
> Built for dashboards with multiple widgets and real-world data visualization needs.
|
|
10
|
+
|
|
11
|
+
## Preview
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
## Why bubble-chart-js?
|
|
16
|
+
|
|
17
|
+
✔ Automatically arranges bubbles by value (largest on top)
|
|
18
|
+
✔ Clean stacked layout – no overlaps
|
|
19
|
+
✔ Interactive tooltips & click events
|
|
20
|
+
✔ Works with plain JS & TypeScript
|
|
21
|
+
✔ Zero dependencies
|
|
22
|
+
|
|
23
|
+
## Quick Start
|
|
24
|
+
|
|
25
|
+
```js
|
|
26
|
+
import { initializeChart } from "bubble-chart-js";
|
|
27
|
+
|
|
28
|
+
initializeChart({
|
|
29
|
+
canvasContainerId: "bubbleChart",
|
|
30
|
+
data: [
|
|
31
|
+
{ label: "Orders", value: 207, bubbleColor: "#ff5733" },
|
|
32
|
+
{ label: "Returns", value: 96, bubbleColor: "#4caf50" },
|
|
33
|
+
],
|
|
34
|
+
});
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
That’s it. Chart rendered.
|
|
38
|
+
|
|
5
39
|
### ✨ Why Use a Stacked Bubble Chart?
|
|
6
40
|
|
|
7
41
|
Multi-Dimensional Data Representation – Visualizes multiple datasets at once.
|
|
@@ -22,21 +56,7 @@ Customizable & Interactive – Allows tooltips.
|
|
|
22
56
|
|
|
23
57
|
✔️ Interactive tooltips and hover effects
|
|
24
58
|
|
|
25
|
-
###
|
|
26
|
-
|
|
27
|
-
Financial Analysis – Display investment risks vs. returns for multiple assets.
|
|
28
|
-
|
|
29
|
-
Social Media Metrics – Visualize engagement levels across platforms.
|
|
30
|
-
|
|
31
|
-
Scientific Research – Show relationships in grouped experimental data.
|
|
32
|
-
|
|
33
|
-
### 🎨 Example Output
|
|
34
|
-
|
|
35
|
-
Here’s an example of the bubble chart generated using this package:
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
## Installation
|
|
59
|
+
### Installation
|
|
40
60
|
|
|
41
61
|
You can install `bubbleChartJs` via npm:
|
|
42
62
|
|
|
@@ -44,9 +64,7 @@ You can install `bubbleChartJs` via npm:
|
|
|
44
64
|
npm install bubble-chart-js
|
|
45
65
|
```
|
|
46
66
|
|
|
47
|
-
## Usage
|
|
48
|
-
|
|
49
|
-
### Basic Example
|
|
67
|
+
## Advanced Usage
|
|
50
68
|
|
|
51
69
|
```js
|
|
52
70
|
import BubbleChart from "bubblechartjs";
|
|
@@ -134,12 +152,6 @@ initializeChart(chartoptions);
|
|
|
134
152
|
|
|
135
153
|
## Configuration Options
|
|
136
154
|
|
|
137
|
-
The `BubbleChart` class accepts a configuration object with the following properties:
|
|
138
|
-
|
|
139
|
-
## Configuration Options
|
|
140
|
-
|
|
141
|
-
The `BubbleChart` class accepts a configuration object with the following properties:
|
|
142
|
-
|
|
143
155
|
| Property | Type | Required | Optional | Description | Default |
|
|
144
156
|
| ---------------------------------- | ------------ | -------- | -------- | ------------------------------------------------------------------------------------------------- | ----------- |
|
|
145
157
|
| `canvasContainerId` | `string` | ✔️ Yes | ❌ No | The ID of the container where the chart will be rendered. | `-` |
|
|
@@ -158,6 +170,30 @@ The `BubbleChart` class accepts a configuration object with the following proper
|
|
|
158
170
|
✔️ **Required**: These properties must be provided.
|
|
159
171
|
✔️ **Optional**: If not provided, the default value will be used.
|
|
160
172
|
|
|
173
|
+
### 📌 Use Cases
|
|
174
|
+
|
|
175
|
+
Financial Analysis – Display investment risks vs. returns for multiple assets.
|
|
176
|
+
|
|
177
|
+
Social Media Metrics – Visualize engagement levels across platforms.
|
|
178
|
+
|
|
179
|
+
Scientific Research – Show relationships in grouped experimental data.
|
|
180
|
+
|
|
181
|
+
## Live Demo
|
|
182
|
+
|
|
183
|
+
🚀 **Try it live on Stackblitz**
|
|
184
|
+
https://stackblitz.com/edit/bubble-chart-js?file=main.js
|
|
185
|
+
|
|
186
|
+
🚀 **Try it live on CodeSandbox**
|
|
187
|
+
https://codesandbox.io/p/sandbox/xenodochial-cherry-4yrcnk
|
|
188
|
+
|
|
189
|
+
## 📦 Package
|
|
190
|
+
|
|
191
|
+
- **npm (public)**
|
|
192
|
+
https://www.npmjs.com/package/bubble-chart-js
|
|
193
|
+
|
|
194
|
+
- **GitHub Packages (npm)**
|
|
195
|
+
https://github.com/Praga-Dev?tab=packages
|
|
196
|
+
|
|
161
197
|
## License
|
|
162
198
|
|
|
163
199
|
This project is licensed under the MIT License.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "bubble-chart-js",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.18",
|
|
4
4
|
"description": "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.",
|
|
5
5
|
"main": "dist/bubbleChart.cjs.js",
|
|
6
6
|
"module": "dist/bubbleChart.esm.js",
|