A Gear-style Chart Component for React

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.