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