Here is a simple dial chart in react by making use of d3-shape and d3-scale modules.
'use strict';
import React from 'react';
import ReactDOM from 'react-dom';
import { arc } from 'd3-shape';
import { scaleLinear } from 'd3-scale';
const startAngle = (-1 * Math.PI) / 3; // - 60deg
const endAngle = Math.PI / 3; // 60deg
//Create an arc path for dial
const dial = arc().startAngle(startAngle).endAngle(endAngle).innerRadius(80).outerRadius(145);
//Create a scale for using with arc
const scale = scaleLinear()
.domain([0, 100]) // Adjust the values according to your data
.range([startAngle, endAngle]);
const Chart = React.createClass({
render() {
const width = 300,
height = 300,
transform = `translate(${width * 0.5},${0.65 * height})`,
current = (x) => dial.endAngle(scale(x))(); // get arc path for given value
return (
<svg viewBox={`0 0 ${width} ${height}`}>
<path fill="#dddddd" d={dial()} transform={transform} />
<path fill="#f44336" d={current(this.props.fill)} transform={transform} />
</svg>
);
},
});
//Do not forget to include/change the id of the target element
ReactDOM.render(<Chart fill={60} />, document.getElementById('main'));