JSFiddle - React, Tailwind, and code Playground

by Nofiden Noble

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<canvas id="myChart"  height="200"></canvas>

JavaScript

var ctx = document.getElementById("myChart");
var chartData = {
  labels: [
    "Pre-Processing",
    "Encoding",
    "QC",
    "Delivery Fulfilment",
    "Delivery"
  ],
  datasets: [{
    data: [20,20,20,20,20],
    backgroundColor: [
      "#e38a74",
      "#e3c974",
      "#ff8cf0",
      "#ade374",
      "#74e3c4"
    ],
    hoverBackgroundColor: [
      "#e38a74",
      "#e3c974",
      "#ade374",
      "#ade374",
      "#74e3c4"
    ]
  }, {
    data: [5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5],
    backgroundColor: [
    "#749de3",
    "#a474e3",
    "#c774e3",
    "#e374c7",
    "#e37487",
           "#749de3",
    "#a474e3",
    "#c774e3",
    "#e374c7",
    "#e37487",
          "#749de3",
    "#a474e3",
    "#c774e3",
    "#e374c7",
    "#e37487",
           "#749de3",
    "#a474e3",
    "#c774e3",
    "#e374c7",
    "#e37487"
    ],
    hoverBackgroundColor: [
      "#FF6384",
      "#36A2EB",
      "#FFCE56",
      "#FF6384",
      "#36A2EB",
      "#FFCE56"
    ]
  }]
};
var pieChart = new Chart(ctx, {
 type: "doughnut",
  data: chartData
})