react-gauge-chart

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

Usage

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

``jsx
import GaugeChart from 'react-gauge-chart'


`

Examples

Check the demo below for live examples of the charts

#### To create a default chart

`jsx

`

#### Chart with 20 levels and pointer at 86%

`jsx
nrOfLevels={20}
percent={0.86}
/>
`

#### Chart with custom colors and larger arc width

`jsx
nrOfLevels={30}
colors={["#FF5F6D", "#FFC371"]}
arcWidth={0.3}
percent={0.37}
/>
`

#### Chart with other corner radius and larger padding between arcs

`jsx
nrOfLevels={10}
arcPadding={0.1}
cornerRadius={3}
percent={0.6}
/>
`

#### Chart with custom arcs width

`jsx
nrOfLevels={420}
arcsLength={[0.3, 0.5, 0.2]}
colors={['#5BE12C', '#F5CD19', '#EA4228']}
percent={0.37}
arcPadding={0.02}
/>
`

#### Chart with disabled animation

`jsx
animate={false}
nrOfLevels={15}
percent={0.56}
needleColor="#345243"
/>
`

Demo

https://martin36.github.io/react-gauge-chart/

API

$3

#### Note: If you do any updates to the props of the chart, it will rerender with a different size (it's a bug). To prevent this set a fixed height for the chart e.g.

`jsx
const chartStyle = {
height: 250,
}

`

The props for the 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 length of each individual arc. If this prop is set, 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 starting the needle animation | 500 |
| animateDuration | PropTypes.number | Duration in ms for the needle animation | 3000 |
| formatTextValue | PropTypes.func | Format you own text value (example: value => value+'%') | null |
| textComponent | PropTypes.elements | Custom text label textComponent | null |
| textComponentContainerClassName | PropTypes.string | Add className to the text component container | |
| needleScale | PropTypes.number | Needle arc cornerRadius | 0.55 |
| customNeedleComponent | PropTypes.element | Custom needle component Note: Make sure to rotate the needle as per the percentage value | null |
| customNeedleComponentClassName | PropTypes.string | Add className to the custom needle container | |
| customNeedleStyle | PropsTypes.object | Add style to custom needle container div | |
|

##### Colors for the chart

The colors could either be specified as an array of hex color values, such as ["#FF0000", "#00FF00", "#0000FF"]` where
each arc would a color in the array (colors are assigned from left to right). If that is the case, then the length of the array
must match the number of levels in the arc.
If the number of colors does not match the number of levels, then the first and the last color from the colors array will
be selected and the arcs will get colors that are interpolated between those. The interpolation is done using d3.interpolateHsl.