react-tooltip-bubble-chart
TypeScript icon, indicating that this package has built-in type declarations

1.0.37 • Public • Published

react-tooltip-bubble-chart

FILES LICENSE DOWNLOADS

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.


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

npm install react-tooltip-bubble-chart #npm

📦 Example

Example

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;

Bubble Chart DataType

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

If you want to run it yourself, follow the command below.

  cd /storybook && npm run storybook

📜 License

MIT License

Package Sidebar

Install

npm i react-tooltip-bubble-chart

Weekly Downloads

81

Version

1.0.37

License

MIT

Unpacked Size

230 kB

Total Files

11

Last publish

Collaborators

  • ire4564