✨ 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.
MIT License
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. 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.
npm install react-tooltip-bubble-chart #npm
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 (
<div>
<BubbleChart
bubblesData={bubbleData}
width={700}
height={470}
textFillColor="#717C84"
backgroundColor="white"
minValue={1}
maxValue={150}
move={true}
/>
</div>
);
}
export default Example;
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 };
};
}
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 |
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.
If you want to run it yourself, follow the command below.
cd /storybook && npm run storybook
MIT License