JSFiddle - React, Tailwind, and code Playground

by Andy Jones

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<button id="changeData" class="original">Add new</button>
<div id="chart" ></div>

CSS

.link {
    stroke: #777;
    stroke-width: 2px;
}
body {
    background-color:#263238;
    
}

text {
    fill:#fff;
}

.state .background {
    opacity: 0.15;
}

JavaScript

var radialprogress = function () {
	var radialData,
	duration = 1000,
	selection,
	width = 300,
	height = 300,
	diameter,
	title = "",
	fontSize = 10,
	control = {};

	var value = 0,
	minValue = 0,
	color = ["#fc1a47", "#9efe33", "#2dd3dc", "#FF5502", "#FF5502", "#00FB05", "#0500FB", "#FB00F6"],
	arc,
	arc2,
	radial,
	maxValue = 100,
	svg,
	innerRadius,
	outerRadius,
	line,
	arcPadding = 2,
	arcThickness = 17;
	var twoPi = 2 * Math.PI;

	control.value = function (_) {
		if (!arguments.length)
			return value;
		value = _;
		return control;
	}

	control.margin = function (_) {
		if (!arguments.length)
			return margin;
		margin = _;
		return control;
	};

	control.diameter = function (_) {
		if (!arguments.length)
			return diameter
			diameter = _;
		return control;
	};

	control.minValue = function (_) {
		if (!arguments.length)
			return minValue;
		minValue = _;
		return control;
	};

	control.outerRadius = function (_) {
		if (!arguments.length)
			return outerRadius;
		outerRadius = _;
		return control;
	};

	control.innerRadius = function (_) {
		if (!arguments.length)
			return innerRadius;
		innerRadius = _;
		return control;
	};

	control.maxValue = function (_) {
		if (!arguments.length)
			return maxValue;
		maxValue = _;
		return control;
	};

	control.title = function (_) {
		if (!arguments.length)
			return title;
		title = _;
		return control;
	};

	control.radialData = function (_) {
		if (!arguments.length)
			return radialData;
		radialData = _;
		// Record the change in historical values
		return control;
	};

	control.render = function () {

		for (var i = 0; i < radialData.length; i++) {
			var foreground = '#foreground-' + radialData[i].id;
			var background = '#background-' + radialData[i].id;
			var stateText = '#stateText-' + radialData[i].id;
			var arrow = '#arrow-' + radialData[i].id;

			$(foreground + ',' + background + ',' + stateText + ',' + arrow).remove();

		}
		var states = svg.selectAll('g.state').data(radialData, function (d)...