Simple Bubble Chart

Simple Bubble Chart is a lightweight JavaScript library that allows you to create and display bubble charts effortlessly. It provides components for individual bubbles and a container to organize and visualize multiple bubbles.

Installation

You can install Simple Bubble Chart using npm:

``bash
npm install simple-bubble-chart
`

Usage

$3

To use Simple Bubble Chart, import the necessary components as follows:

`typescript
import Bubble from "simple-bubble-chart/Bubble";
import BubbleChartContainer from "simple-bubble-chart/BubbleChartContainer";
`

Creating a Bubble

To create an individual bubble, use the Bubble component with the following props:

- title (String): The title of the bubble.
- titleColor (String): The color of the title text.
- subTitle (String): The subtitle of the bubble.
- subTitleColor (String): The color of the subtitle text.
- backgroundColor (String): The background color of the bubble.
- size (Number): The size of the bubble.

Example:

`typescript
title="Some title"
titleColor="some color"
subTitle="Some subtitle"
subTitleColor="subtitle color"
backgroundColor="bubble background color"
size={bubbleSize}
/>
`

Creating a Bubble Chart

To create a bubble chart, use the BubbleChartContainer component with the following props:

- bubbles (Array): An array of components or other elements to be displayed within the chart.
- height (Number): The height of the chart container.
- width (Number): The width of the chart container.
- elementSize (Number): The default size for bubbles within the chart.

Example:

`typescript
bubbles={
[
// Insert Bubble Components or other elements here
]
}
height={500}
width={500}
elementSize={150}
/>
`

Example

Here's a complete example of how to use Simple Bubble Chart to create a bubble chart:

`typescript
import React from "react";
import Bubble from "simple-bubble-chart/Bubble";
import BubbleChartContainer from "simple-bubble-chart/BubbleChartContainer";

function BubbleChartExample() {
return (
bubbles={[
title="Bubble 1"
titleColor="#FF5733"
subTitle="Subtitle 1"
subTitleColor="#3366FF"
backgroundColor="#FFD700"
size={100}
/>,
// Add more bubbles here
]}
height={150}
width={150}
elementSize={150}
/>
);
}

export default BubbleChartExample;
``