Wrote this configurable, "exportable" gauge in d3. Gist here.
Usage
let chart = new GaugeChart()
chart.setProperties(properties_object) //optional
chart.setPercentage(0.55)
return chart.draw().node()Examples
Default state, no properties set by user
let chart = new GaugeChart()
chart.setPercentage(0.25)
return chart.draw().node()
Or,
//...
chart.setProperties({
thickness: 0.2,
arc: 0.75,
ticks: 6,
color_scheme: "interpolateGnBu",
color_step: 20
})
//...
Or,
//...
chart.setProperties({
thickness: 1,
arc: 1,
ticks: 11,
color_scheme: "interpolateReds",
color_step: 10
})
//...
And of course a trillion other permutations. Check the demo linked above that has some controls you can use to adjust to your heart's content.