https://github.com/ire4564/react-tooltip-bubble-chart
✨ react-tooltip-bubble-chart✨ , This is a bubble chart component that includes a tooltip using d3. I created a component based on React and Typescript by referring to the open source Draw a bubble chart.
https://github.com/ire4564/react-tooltip-bubble-chart
charts d3 react react-bubble-chart typescript
Last synced: 8 months ago
JSON representation
✨ react-tooltip-bubble-chart✨ , This is a bubble chart component that includes a tooltip using d3. I created a component based on React and Typescript by referring to the open source Draw a bubble chart.
- Host: GitHub
- URL: https://github.com/ire4564/react-tooltip-bubble-chart
- Owner: ire4564
- License: mit
- Created: 2022-12-06T09:10:26.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2022-12-18T11:30:56.000Z (almost 3 years ago)
- Last Synced: 2025-03-12T04:20:45.871Z (8 months ago)
- Topics: charts, d3, react, react-bubble-chart, typescript
- Language: TypeScript
- Homepage:
- Size: 56.1 MB
- Stars: 6
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# react-tooltip-bubble-chart
This is a bubble chart component that includes a tooltip using `d3`. I created a component based on `React` and `Typescript` by referring to the open source [Draw a bubble chart](https://medium.com/react-courses/who-doesnt-like-charts-draw-a-bubble-chart-with-react-d3-typescript-2faf998109e2). When the mouse `hovers` over the bubble chart object, the contents inside the bubble chart are displayed as a `tooltip`. You can also customize the movement of the bubble chart through the `move` setting. This library can be an excellent choice for data visualization. I hope this is what you were looking for.
## ✨ Features
- ✌ Written TypeScript
- ✅ Available in React
- 💬 Possible Fine text alignment
- 🌀 Available Interactive motion
- 💅 Can Custom each bubble chart object
- 🌟 Can check the contents of the object as a tooltip
## 🔧 Installation
```bash
npm install react-tooltip-bubble-chart #npm
```
## 📦 Example
```tsx
import "./App.css";
import BubbleChart from "react-tooltip-bubble-chart";
function Example() {
const bubbleData = [
{
fillColor: "rgb(52, 202, 173, 0.3)",
id: 5,
name: "Setting\nme",
size: 50,
dYdX1: { dy: -2, dx: -3 },
dYdX2: { dy: 8, dx: -20 },
},
{
fillColor: "rgb(52, 202, 173, 0.3)",
id: 6,
name: "Getting\nStart",
size: 120,
dYdX1: { dy: -2, dx: -4 },
},
{
fillColor: "rgb(52, 202, 173, 0.3)",
id: 7,
name: "Setting\nme",
size: 50,
dYdX1: { dy: -2, dx: -3 },
dYdX2: { dy: 8, dx: -20 },
},
];
return (
);
}
export default Example;
```
## ✔ Bubble Chart DataType
```tsx
export namespace BubbleChartTypes {
export type Data = {
fillColor: string;
id: number;
name: string;
size: number;
dYdX1: { dy: number; dx: number };
dYdX2: { dy: number; dx: number };
dYdX3: { dy: number; dx: number };
};
}
```
## 👀 Props
| Prop | Description | Type | Test |
| ----------------- | ------------------------------------------------------------ | --------- | ------------- |
| `bubblesData` | An array of text and `setting values` for the bubble chart | `array` | bubblesData[] |
| `move` | Bubble chart `animation` settings dropdown | `boolean` | true |
| `width` | `Width` of the entire area of the bubble chart | `number` | 700 |
| `height` | `Height` of the entire area of the bubble chart | `number` | 470 |
| `backgroundColor` | Set `background color` behind bubble chart | `string` | white |
| `textFillColor` | Change the `color of the text` inside the bubble chart | `string` | #717C84 |
| `minValue` | Bubble chart `minimum` weight value | `number` | 1 |
| `maxValue` | Bubble chart `maximum` weight value callback | `number` | 150 |
## ⭕ Test
If you need intuitive usage, you can try this library right away through Storybook. You can check the operation more intuitively. Please refer to the information below.
[✨Awsome Storybook Page✨](https://ire4564.github.io/react-tooltip-bubble-chart/?path=/story/example-bubblechart--move)
If you want to run it yourself, follow the command below.
```bash
cd /storybook && npm run storybook
```
## 📜 License
MIT License