node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

react-circular-legend

react-circular-legend

Dependency Status npm GitHub license

A circular legned component, using react, d3.js

example movie

Installation

npm install react-circular-legend

Demo

https://takayuki-ito.me/react-circular-legend/

props

  • ticks: (required) Array of numbers, see example above
  • domainMax: Number, default maximum number in ticks
  • domainMin: Number, default is 0
  • rangeMax: Number, default is 80, it's circle radius max.
  • rangeMin: Number, default is 0
  • tickExtend: Number, default is 5
  • textMargin: Number, default is 5
  • fontSize: Number, default is 12, it's px size.
  • innerSvg: Boolean, if you want to add this legned in your svg, you should set true.

Example

import React from 'react';
import CircularLegend from 'react-circular-legend';
 
function Example() {
  return (
    <CircularLegend
      ticks={[0, 2500, 5000, 10000]}
    />
  );  
}
 
export default Example;

License

MIT