react-chart-canvas

react chart canvas base structure

$3

``javascript
import ReactChartCanvas from 'react-chart-canvas';
import Chart from '*'

`


$3


`javascript
{
onClick: (e, info), // default
onHover: (e, info), // default
onResize: ({ ratio, clientWidth, clientHeight, ratioWidth, ratioHeight }, e), // default
title: '',
isGradient: false,
labelStyle: '#333',
dataStyle: '#fff',
tooltip: { // default
show: true,
formatter: (info) => {
return 占比: ${info.percent*100}%;
}
},
tooltipStyle: {
backgroundColor: 'rgba(0,0,0,0.65)',
...
},
}
`

$3

react-chart-tooltip

react-chart-adapt

$3

example: react-radial-bar-chart

`javascript
class Chart* {

constructor(props) {
this.setValue(props);
}

setValue = (props = {}) => {
...
}

update = (props, ctx) => {
...
}

draw = (ctx) => {
...
}
...
}
``