bubble-chart-js 1.0.18 → 1.0.19

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.
Files changed (2) hide show
  1. package/README.md +39 -75
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,41 +1,7 @@
1
- # bubble-chart-js
1
+ # bubbleChartJs
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
- ![npm](https://img.shields.io/npm/v/bubble-chart-js)
6
- ![npm downloads](https://img.shields.io/npm/dm/bubble-chart-js)
7
- ![license](https://img.shields.io/npm/l/bubble-chart-js)
8
-
9
- > Built for dashboards with multiple widgets and real-world data visualization needs.
10
-
11
- ## Preview
12
-
13
- ![Stacked Bubble Chart](./assets/bubble-chart.png)
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
-
39
5
  ### ✨ Why Use a Stacked Bubble Chart?
40
6
 
41
7
  Multi-Dimensional Data Representation – Visualizes multiple datasets at once.
@@ -56,7 +22,21 @@ Customizable & Interactive – Allows tooltips.
56
22
 
57
23
  ✔️ Interactive tooltips and hover effects
58
24
 
59
- ### Installation
25
+ ### 📌 Use Cases
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
+ ![Stacked Bubble Chart Example](https://github.com/Praga-Dev/bubbleChartJS/blob/HEAD/assets/bubble-chart.png)
38
+
39
+ ## Installation
60
40
 
61
41
  You can install `bubbleChartJs` via npm:
62
42
 
@@ -64,7 +44,9 @@ You can install `bubbleChartJs` via npm:
64
44
  npm install bubble-chart-js
65
45
  ```
66
46
 
67
- ## Advanced Usage
47
+ ## Usage
48
+
49
+ ### Basic Example
68
50
 
69
51
  ```js
70
52
  import BubbleChart from "bubblechartjs";
@@ -152,47 +134,29 @@ initializeChart(chartoptions);
152
134
 
153
135
  ## Configuration Options
154
136
 
155
- | Property | Type | Required | Optional | Description | Default |
156
- | ---------------------------------- | ------------ | -------- | -------- | ------------------------------------------------------------------------------------------------- | ----------- |
157
- | `canvasContainerId` | `string` | ✔️ Yes | ❌ No | The ID of the container where the chart will be rendered. | `-` |
158
- | `data` | `DataItem[]` | ✔️ Yes | ❌ No | An array of objects containing `label` and `value` for each bubble. | `-` |
159
- | `defaultBubbleColor` | `string` | ❌ No | ✔️ Yes | Default color for bubbles if not specified in `colorMap`. | `"#3498db"` |
160
- | `fontSize` | `number` | ❌ No | ✔️ Yes | Font size for bubble labels. | `14` |
161
- | `fontFamily` | `string` | ❌ No | ✔️ Yes | Font family for text rendering. | `"Arial"` |
162
- | `fontColor` | `string` | ❌ No | ✔️ Yes | Color of the text inside bubbles. | `"#ffffff"` |
163
- | `minRadius` | `number` | ❌ No | ✔️ Yes | Minimum radius for the bubbles. | `10` |
164
- | `maxLines` | `number` | ❌ No | ✔️ Yes | Maximum number of lines allowed for text wrapping. | `3` |
165
- | `textWrap` | `boolean` | ❌ No | ✔️ Yes | Enables or disables text wrapping inside bubbles. | `true` |
166
- | `isResizeCanvasOnWindowSizeChange` | `boolean` | ❌ No | ✔️ Yes | Whether the chart should resize when the window size changes. | `true` |
167
- | `showToolTip` | `boolean` | ❌ No | ✔️ Yes | Whether the chart should display the tooltip or not. | `true` |
168
- | `onBubbleClick` | `method` | ❌ No | ✔️ Yes | Callback function triggered when a bubble is clicked. Provides the clicked bubble data and event. | `true` |
169
-
170
- ✔️ **Required**: These properties must be provided.
171
- ✔️ **Optional**: If not provided, the default value will be used.
172
-
173
- ### 📌 Use Cases
174
-
175
- Financial Analysis – Display investment risks vs. returns for multiple assets.
137
+ The `BubbleChart` class accepts a configuration object with the following properties:
176
138
 
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
139
+ ## Configuration Options
190
140
 
191
- - **npm (public)**
192
- https://www.npmjs.com/package/bubble-chart-js
141
+ The `BubbleChart` class accepts a configuration object with the following properties:
142
+
143
+ | Property | Type | Required | Optional | Default |
144
+ | -------------------------------------------------------------------------------------- | ------------ | -------- | -------- | ----------- |
145
+ | **`canvasContainerId`**<br/>ID of the container where the chart will be rendered | `string` | ✔️ Yes | ❌ No | `-` |
146
+ | **`data`**<br/>Array of objects containing `label` and `value` for each bubble | `DataItem[]` | ✔️ Yes | ❌ No | `-` |
147
+ | **`defaultBubbleColor`**<br/>Default color used when bubble color is not provided | `string` | ❌ No | ✔️ Yes | `"#3498db"` |
148
+ | **`fontSize`**<br/>Font size for bubble labels | `number` | ❌ No | ✔️ Yes | `14` |
149
+ | **`fontFamily`**<br/>Font family used for text rendering | `string` | ❌ No | ✔️ Yes | `"Arial"` |
150
+ | **`fontColor`**<br/>Text color inside bubbles | `string` | ❌ No | ✔️ Yes | `"#ffffff"` |
151
+ | **`minRadius`**<br/>Minimum radius of a bubble | `number` | ❌ No | ✔️ Yes | `10` |
152
+ | **`maxLines`**<br/>Maximum number of lines allowed for text wrapping | `number` | ❌ No | ✔️ Yes | `3` |
153
+ | **`textWrap`**<br/>Enable or disable text wrapping inside bubbles | `boolean` | ❌ No | ✔️ Yes | `true` |
154
+ | **`isResizeCanvasOnWindowSizeChange`**<br/>Automatically resize chart on window resize | `boolean` | ❌ No | ✔️ Yes | `true` |
155
+ | **`showToolTip`**<br/>Toggle tooltip visibility | `boolean` | ❌ No | ✔️ Yes | `true` |
156
+ | **`onBubbleClick`**<br/>Callback fired when a bubble is clicked | `method` | ❌ No | ✔️ Yes | `-` |
193
157
 
194
- - **GitHub Packages (npm)**
195
- https://github.com/Praga-Dev?tab=packages
158
+ ✔️ **Required**: These properties must be provided.
159
+ ✔️ **Optional**: If not provided, the default value will be used.
196
160
 
197
161
  ## License
198
162
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bubble-chart-js",
3
- "version": "1.0.18",
3
+ "version": "1.0.19",
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",