A Gear-style Chart Component for React
Actively maintained. Welcome to PR/Issue. 🤡👉 Demo 👈🤡
Instal
npm install react-gear-chart
Usage
// 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.