react-advanced-gauge-chart

React component for displaying a gauge chart, using D3.js

Usage

Install it by running npm install react-advanced-gauge-chart. Then to use it:

import GaugeChart from 'react-advanced-gauge-chart'

<GaugeChart id="gauge-chart1" />

Note: This repo has been cloned and modified from https://github.com/Martin36/react-gauge-chart, please refer and use Martin's original package if you do not need the additional changes.

Important: Font Awesome Icon package should be imported (from any of your preferred CDN) in index.html.

Examples

Check the demo below for complete list of live examples of the charts

To create a default chart

<GaugeChart id="gauge-chart1" />

Chart with difference highlighted

<GaugeChart id="gauge-chart2"
  percent={0.86}
  previousValue={0.75}
/>

Demo

https://srujithm.github.io/react-advanced-gauge-chart/

API

Warning: Do not use the same id for multiple charts, as it will put multiple charts in the same container

Props from https://github.com/Martin36/react-gauge-chart:

| Name | PropType | Description | Default value | |-----------------|-----------------------------|----------------------------------------------------------------|------------------------| | id | PropTypes.string.isRequired | Used for the identification of the div surrounding the chart | | | className | PropTypes.string | Add className to the div container | | | style | PropTypes.object | Add style to the div container | { width: '100%' } | | marginInPercent | PropTypes.number | Margin for the chart inside the containing SVG element | 0.05 | | cornerRadius | PropTypes.number | Corner radius for the elements in the chart | 6 | | nrOfLevels | PropTypes.number | The number of elements displayed in the arc | 3 | | percent | PropTypes.number | The number where the pointer should point to (between 0 and 1) | 0.4 | | arcPadding | PropTypes.number | The distance between the elements in the arc | 0.05 | | arcWidth | PropTypes.number | The thickness of the arc | 0.2 | | colors | PropTypes.array | An array of colors in HEX format displayed in the arc | ["#00FF00", "#FF0000"] | | textColor | PropTypes.string | The color of the text | "#FFFFFF" | | needleColor | PropTypes.string | The color of the needle triangle | "#464A4F" | | needleBaseColor | PropTypes.string | The color of the circle at the base of the needle | "#464A4F" | | hideText | PropTypes.bool | Whether or not to hide the percentage display | false | | arcsLength | PropTypes.array | An array specifying the lenght of the each individual arc. If this prop is then the nrOfLevels prop will have no effect | none | | animate | PropTypes.bool | Whether or not to animate the needle when loaded | true | | animDelay | PropTypes.number | Delay in ms before start the needle animation | 500 | | formatTextValue | PropTypes.func | Format you own text value (example: value => value+'%') | null |

Newly introduced props for the chart:

| Name | PropType | Description | Default value | |-----------------|-----------------------------|----------------------------------------------------------------|------------------------| | previousValue | PropTypes.number | The number to compare current percentage with (between 0 and 1) | |