Bubble Chart

Installation

npm: npm install @saypr/bubble-chart --save

yarn: yarn add @saypr/bubble-chart

Usage

Javascript

import { BubbleChart } from '@saypr/bubble-chart';

const data = [{value: 100}, {value: 150}, {value: 70}];
const svg = document.querySelector('svg');

const chart = new BubbleChart(svg, data);

React (wip)

import { BubbleChart, Bubble, Visual, ToolTip } from '@saypr/bubble-chart/react';

const MyComp = () => {
  return (
    <BubbleChart size={[1000, 1000]}>
      <Bubble radius={200} stroke="blue" fill="red">
        <Visual>
          <span>This will be placed into center of the circle</span>
        </Visual>
        <ToolTip>
          <div>This will be shown on mouse hover as tooltip content</div>
        <ToolTip>
      </Bubble>
      {/*More <Bubble>*/}
    </BubbleChart>
  );
}