react-chart-canvas

react chart canvas base structure

How to use

import ReactChartCanvas from 'react-chart-canvas';
import Chart* from '**'
 
<ReactChartCanvas Chart={Chart** }/>
 

RadialBarChart Props

{
  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)',
    ...
  },
}

Base Package

react-chart-tooltip

react-chart-adapt

How to Write chart

example: react-radial-bar-chart

  class Chart* {
 
    constructor(props) {
      this.setValue(props);
    }
 
    setValue = (props = {}) => {
      ...
    }
 
    update = (props, ctx) => {
      ...
    }
 
    draw = (ctx) => {
      ...
    }
    ...
  }