Chart.js Doughnout

by Luca De Nardi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.js"></script>
<canvas id="myChart"></canvas>

CSS

body{
  background: white;
}

JavaScript

var data = {
  labels: [
    "A",
    "B",
    "C",
    "D"
  ],
  datasets: [
    {
      data: [24, 2, 6, 18],
      backgroundColor: [
        "#B54A37",
        "#489C85",
        "#A2B55B",
        "#E99E32"
      ],
      borderColor: '#105187'
    },
    {
      data: [
        4,8,4,8,
        0.33,	0.83,	0.17,	0.67,
        1.29,	2.14,	0.86,	1.71,
        0,9,0,9
       ],
      backgroundColor: [
        "#FF6138",
        "#FFFF9D",
        "#BEEB9F",
        "#79BD8F",
        "#FF6138",
        "#FFFF9D",
        "#BEEB9F",
        "#79BD8F",
        "#FF6138",
        "#FFFF9D",
        "#BEEB9F",
        "#79BD8F",
        "#FF6138",
        "#FFFF9D",
        "#BEEB9F",
        "#79BD8F"
      ],
      borderColor: '#105187'
    }
    ]
};

var promisedDeliveryChart = new Chart(document.getElementById('myChart'), {
  type: 'doughnut',
  data: data,
  options: {
  	responsive: true,
    legend: {
      display: false
    },
    elements: {
        arc: {
            borderWidth: 5
        }
    }
  }
});