react canvas radial bar chart

react-radial-bar-chart

环形柱状图(玉玦图) by canvas

How to use

import RadialBarChart from 'react-radial-bar-chart'; <RingBarChart /> RadialBarChart Props

{ list: [ // example { name: 'Q1', percent: 0.5, backgroundColor: '' }, { name: 'Q2', percent: 0.4 }, { name: 'Q3', percent: 0.3 }, { name: 'Q4', percent: 0.2 }, ], lineWidth: 20, // default width: 250, // default height: 250, // default radius: 100, // default onClick: (e, ringInfo), // default onHover: (e, ringInfo), // default onResize: ({ ratio, clientWidth, clientHeight, ratioWidth, ratioHeight }, e), // default title: '', isGradient: false, labelStyle: '#333', dataStyle: '#fff', tooltip: { // default show: true, formatter: (ringInfo) => { return `占比: ${ringInfo.percent*100}%`; } }, tooltipStyle: { backgroundColor: 'rgba(0,0,0,0.65)', ... }, } Base Package

color-conversion-rgb

react-chart-canvas

Inspiration From

In a project I have to make a React RadialBarChart compoment, and I found radial-bar. But its name is not centered. Also I do not need import all of it just for radial-bar, so I write one.

CheckList Changelog 0.1.3 Split code to color-conversion-rgb、react-chart-canvas 0.1.2 Gradient color 0.1.1 draw single ring (finish) multi ring (finish) draw percent at the end of ring (finish) draw name at the begin of ring (finish) percent in ring vertical center (finish) percent rotate for read (finish) percent stay in bar and name out, in a regular rule (finish) floating effect (finish) event for each ring (finish) Hexadecimal color, HSL color to RGB (finish) random color for different ring (finish, just random two color) floating effect not out of ring (finish) size adaptation, and fix size calc error (finish) Tooltip and more info (finish) fix Tooltip out of parentNode (finish) word and chart more clearly (finish)