JSFiddle - React, Tailwind, and code Playground

by Sanal S

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<div class="box-body">
     <canvas id="pieChart" width="787" height="543"></canvas>
</div>

JavaScript

$(function(){
var pieChartCanvas = $("#pieChart").get(0).getContext("2d");
    var pieChart = new Chart(pieChartCanvas);
    var PieData = [
      {
        value: 70000,
        color: "#f56954",
        highlight: "#f56954",
        label: "Chrome"
      },
      {
        value: 6000,
        color: "#00a65a",
        highlight: "#00a65a",
        label: "IE"
      },
      {
        value: 4000,
        color: "#f39c12",
        highlight: "#f39c12",
        label: "FireFox"
      },
      {
        value: 4000,
        color: "#00c0ef",
        highlight: "#00c0ef",
        label: "Safari"
      },
      {
        value: 3000,
        color: "#3c8dbc",
        highlight: "#3c8dbc",
        label: "Opera"
      },
      {
        value: 10,
        color: "#d2d6de",
        highlight: "#d2d6de",
        label: "Navigator"
      }
    ];
    var pieOptions = {
      segmentShowStroke: true,
      segmentStrokeColor: "#fff",
      segmentStrokeWidth: 2,
      percentageInnerCutout: 50,
      animationSteps: 100,
      animationEasing: "easeOutBounce",
      animateRotate: true,
      animateScale: false,
      responsive: true,
      maintainAspectRatio: true
    };
    pieChart.Doughnut(PieData, pieOptions);

});