simple-bubble-chart/README.md

Simple bubble chart library

# 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
```

<br>

## Usage

### Importing the Components

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 <b>Bubble</b> 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
<Bubble
  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 <b>BubbleChartContainer</b> component with the following props:

- bubbles (Array): An array of <Bubble> 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
<BubbleChartContainer
  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 (
    <BubbleChartContainer
      bubbles={[
        <Bubble
          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;
```