JSFiddle - React, Tailwind, and code Playground

by Alen Subasic

HTML

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

JavaScript

var ctx = $("#myChart");
  var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: ["Green", "Yellow", "Red", "Purple", "Blue"],
      datasets: [{
        data: [1, 2, 3, 4, 5],
        backgroundColor: [
          'green',
          'yellow',
          'red',
          'purple',
          'blue',
        ],
        labels: [
          'green',
          'yellow',
          'red',
          'purple',
          'blue',
        ]
      }, {
        data: [6, 7, 8],
        backgroundColor: [
          'black',
          'grey',
          'lightgrey'
        ],
        labels: [
          'black',
          'grey',
          'lightgrey'
        ],
      }, ]
    },
    options: {
      responsive: true,
      legend: {
        display: false,
      },
      tooltips: {
        callbacks: {
          label: function(tooltipItem, data) {
            var dataset = data.datasets[tooltipItem.datasetIndex];
            var index = tooltipItem.index;
            return dataset.labels[index] + ': ' + dataset.data[index];
          }
        }
      }
    }
  });