React Score Indicator

React component to display a score with a doughnut chart

Demo

Install

npm install --save react-score-indicator

Usage

import React, { Component } from 'react'
 
import ReactStoreIndicator from 'react-score-indicator'
 
class Example extends Component {
  render () {
    return (
      <ReactStoreIndicator
        value={30}
        maxValue={100}
      />
    )
  }
}

Props

Name	Type	Default	Description	Required
value	number		Value of score	yes
maxValue	number		Value of max total score	yes
width	number	200	Width of component	no
stepColors	array	view below	Array with n hex colors corresponding to steps in the chart	no
lineWidth	number	5	Width of line	no
lineGap	number	5	Space between the lines	no
fadedOpacity	number	40	Opacity percentage of the "disabled" steps	no
style	object	{}	Style to customize the component wrapper	no
textStyle	object	{}	Style to customize the score value text inside the chart	no

DEFAULT COLOR PALETTE

[
  '#d12000',
  '#ed8d00',
  '#f1bc00',
  '#84c42b',
  '#53b83a',
  '#3da940',
  '#3da940',
  '#3da940',
]

License

MIT © tomma5o