Package Exports

react-d3-speedometer

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-d3-speedometer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-d3-speedometer

react-d3-speedometer is a react component for showing speedometer like gauge using d3.

Usage:

NPM: npm install --save react-d3-speedometer

Yarn: yarn add react-d3-speedometer

// import the component
import ReactSpeedometer from "react-d3-speedometer";
// and just use it
<ReactSpeedometer />

Configuration Options:

prop	type	default	comments
value	number	0	Make sure your value is between your `minValue` and `maxValue`
minValue	number	0
maxValue	number	1000
segments	number	5	Number of segments in the speedometer
width	number	300	diameter of the speedometer and the width of the svg element
height	number	300	height of the svg element. Height of the speedometer is always half the width since it is a semi-circle. For fluid width, please refere to `fluidWidth` config
fluidWidth	boolean	false	If `true` takes the width of the parent component. See Live Example for more details
needleColor	string	"steelblue"	Should be a valid color code - colorname, hexadecimal name or rgb value. Should be a valid input for d3.interpolateHsl
startColor	string	"#FF471A"	Should be a valid color code - colorname, hexadecimal name or rgb value. Should be a valid input for d3.interpolateHsl
endColor	string	"#33CC33"	Should be a valid color code - colorname, hexadecimal name or rgb value. Should be a valid input for d3.interpolateHsl

Examples

You can view Live Examples here

Default with no config - Live Example

<ReactSpeedometer />

With configurations - Live Example

<ReactSpeedometer
    maxValue={500}
    value={473}
    needleColor="red"
    startColor="green"
    segments={10}
    endColor="blue"
/>

Fluid Width Example - Live Example

// Speedometer will take the width of the parent div (500)
// any width passed will be ignored
<div style={{
    width: "500px",
    height: "300px",
    background: "#EFEFEF"
}}>
    <ReactSpeedometer
        fluidWidth={true}
        minValue={100}
        maxValue={500}
        value={473}
        needleColor="steelblue"
    />
</div>

Todos:

Test coverage
Configuring speedometer ring width

Credits:

react-d3-speedometer was started as a react port of the following d3 snippet - http://bl.ocks.org/msqr/3202712. Component template bootstrapped with React CDK. Also, many thanks to d3 and react ecosystem contributors.