JSFiddle - React, Tailwind, and code Playground

by Nivaldo

CSS

polyline {
    fill: none;
    stroke: black;
    stroke-width: 1px;
}

JavaScript

var data =  [{statusid:"Paid", price:10}, {statusid:"Not accepted", price:20}, {statusid:"Canceled", price:20}, {statusid:"Waiting", price:1}, {statusid:"Refunded", price:1}, {statusid:"Pending", price:1}];

var sumprice = 0;
for (var i in data) {
  sumprice += data[i].price;
}


/* ==============================================================
  Setting up the chart
============================================================== */

var width = 600,
    height = 500,
    radius = Math.min(width, height) / 4;

var color = d3.scale.ordinal()
    .range(["#227fbc",  "#64a620",  "#7b6888",  "#a15c57",  "#961819",  "#d8d13a",  "#d3723b"]);

var arc = d3.svg.arc()
  .outerRadius(radius * 0.8)
  .innerRadius(radius * 0.4);

var outerArc = d3.svg.arc()
  .innerRadius(radius * 0.9)
  .outerRadius(radius * 0.9);

var pie = d3.layout.pie()
    .sort(null)
    .value(function(d) { return d.price; });

/* ==============================================================
  Creating the svg element
============================================================== */

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

svg.append("g")
  .attr("class", "lines");

svg.append("g")
  .attr("class", "labels");

/* ==============================================================
  Drawning the pizza
============================================================== */

var g = svg.selectAll(".arc")
    .data(pie(data))
    .enter().append("g")
    .attr("class", "arc");

g.append("path")
    .attr("d", arc)
    .style("fill", function(d) {
        return color(d.data.statusid); 
    });

/* ==============================================================
  Drawning the labels
============================================================== */

var key = function(d){ return d.data.statusid; };

var text = svg.select(".labels").selectAll("text")
    .data(pie(data),...