simple-react-d3-guage-chart

simple guage chart for react made using d3

Install

npm install --save simple-react-d3-guage-chart

Usage

import React, { Component } from 'react'

import SimpleGuageChart from 'simple-react-d3-guage-chart'
import 'simple-react-d3-guage-chart/dist/index.css'

class Example extends Component {
  render() {
    return <SimpleGuageChart id={"guage-01"} value={40}/>
  }
}

Examples

Properties

Name	PropType	Description	Default value
value	PropTypes.string.isRequired	Used to Display the value below the pointer
id	PropTypes.string.isRequired	Unique ID for graph
size	PropTypes.number	Size of The chart, Min Value is 200px	300
minValue	PropTypes.number	Minimum value on the scale	0
maxValue	PropTypes.number	Maximum value on the scale	100
minAngle	PropTypes.number	Minimum angle at which the pointer starts. You need to provide both min and max angle. Min angle should always be less than max angle.	-120
maxAngle	PropTypes.number	Maximum angle at which the pointer ends	120
majorTicks	PropTypes.number	Number of Expected Ticks, This will not be same as ticks appearing in graph, This varies based on d3 scale for min and max value.	7
pointerWidth	PropTypes.number	Width of pointer. Diameter at the starting of pointer. Should be in between 2 to 10	6
pointerLength	PropTypes.number	Pointer length Percentage, Should be in between 0.3 and 1	0.7
mainRingWidth	PropTypes.number	Thickness of ring.should be minimum 1	3
ticksRingWidth	PropTypes.number	Height of Ticks. Should be in between 0 and 30	15
tickColors	PropTypes.array	Color of ticks. Should be an array of length 2.	["#d92121", "#12af5a"]
pointerColor	PropTypes.string	Color of Pointer	"#ff0500"
arcColor	PropTypes.string	Color of Main Arc	"#b3b3b3"
tickFontColor	PropTypes.string	Color of Text on scale	"#666"
fontColor	PropTypes.string	Color of Value presented on scale	"#666"

License

MIT © bhanupradeep7