React-gear-chart NPM

A Gear-style Chart Component for React

sample

Actively maintained. Welcome to PR/Issue. 🤡👉 Demo 👈🤡

Instal

npm install react-gear-chart

Usage

import GearListChart from 'react-gear-chart'

// in your render() or whatever
<GearListChart 
  startAngle={110} endAngle={250} 
  outerRadius={300} innerRadius={200}
  margin={7}
  onClick={yourClickHandler}
  clockwise={false}
  items={items} // items to be rendered as teeth on the gear
  />

Props

Name	Type	Default	Description
startAngle	`number`		Required. Start angle of your chart in degree with this convention
endAngle	`number`		Required. End angle of your chart.
innerRadius	`number`		Required. Inner radius of your chart in pixel.
outerRadius	`number`		Required. Outer radius of your chart in pixel.
items	`Array<ToothOption>`		Required. Chart data. See ToothOption
margin	`number`	0	Default angle between teeth.
mode	`string`
clockwise	`boolean`	true	The line-up direction of your items(teeth).
animate	`boolean`	true	In-Out animation on/off. Turn off animation to gain performance.
clockwiseAnimate	`boolean`	true	Teeth In/out animation direction.
motionConfig	`object`	{}	Config for react-motion. See SpringHelperConfig
onClick	`function`		`click` event handler. Strip data is passed with the event, access it by `evt.stripData` & `evt.strips`
onMouseMove/Leave/Enter/Over	`function`		Similar to prop `onClick`
extra	`React$Element`		`props` of a tooth is sent to this function and allow you to render whatever you want over the chart.

ToothOption

ToothOption is a configuration object with following properties

Name	Type	Default	Description
mode	`string`	`spokerib`	`spokerib`, `layer` or `bar`. See demo for details
label	`string`		Text to show on a tooth
strips	`object` or `array`		See StripOption. Can be a single `StripOption` or an array of `StripOption`

StripOption

StripOption is a configuration object with following properties

Name	Type	Default	Description
color	`string`		Valid css color, to fill current strip.
weight	`nubmer`		Alone with the tooth height (outerRadius - innerRadius), determine the "size" of the current strip, like bar height, or Annulus portion in different mode.

Note: other properties can be attached to ToothOption/StripOption and accessed n every mouse event hanlder from the event object.