rcc

react-chart-canvas

react chart canvas base structure

Showing:

Popularity

Downloads/wk

11

GitHub Stars

2

Maintenance

Last Commit

4yrs ago

Contributors

2

Package

Dependencies

2

Size (min+gzip)

46.5KB

License

ISC

Type Definitions

Tree-Shakeable

No?

Categories

React Canvas

Readme

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100