Simple bubble chart library
npm install simple-bubble-chartSimple 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.
You can install Simple Bubble Chart using npm:
``bash`
npm install simple-bubble-chart
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";
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`
titleColor="some color"
subTitle="Some subtitle"
subTitleColor="subtitle color"
backgroundColor="bubble background color"
size={bubbleSize}
/>
To create a bubble chart, use the BubbleChartContainer component with the following props:
- bubbles (Array): An array of
- 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`
[
// Insert Bubble Components or other elements here
]
}
height={500}
width={500}
elementSize={150}
/>
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 (
titleColor="#FF5733"
subTitle="Subtitle 1"
subTitleColor="#3366FF"
backgroundColor="#FFD700"
size={100}
/>,
// Add more bubbles here
]}
height={150}
width={150}
elementSize={150}
/>
);
}
export default BubbleChartExample;
``