JSFiddle - React, Tailwind, and code Playground

by brightertools

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" style=width:100px;height:100px></canvas>
<label id="mylabel"></label>

JavaScript

var ctx = $("#myChart");
  var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
     myLabel: "",
      datasets: [{
        data: [1, 1, 1, 1, 1],
        backgroundColor: [
          'green',
          'green',
          'green',
          'orange',
          'red',
        ],
        labels: [
          ' Mark Redman',
          'John Doe',
          'red',
          'SOme guy',
          'James May',
        ]
      },
      {
        data: [1, 1, 1],
        backgroundColor: [
          
          'green',
          'orange',
          'red',
        ],
        labels: [
          ' Mark Redman',
          'John Doe',
          'red',
          
        ]
      }
      ]
    },
    options: {
      responsive: false,
      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];
            //alert(dataset.labels[index] + ': ' + dataset.data[index]);
            $("#mylabel").text(dataset.labels[index] + ': ' + dataset.data[index]).stop().show().hide(5000);
            return "";
          }
        }
      }
    }
  });
Chart.defaults.global.customTooltips = function(tooltip){
alert("ok");
}