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:

npm install simple-bubble-chart

Usage

Importing the Components

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

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:

<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 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:

<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:

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;