JSFiddle - React, Tailwind, and code Playground

by Sumesh KP

HTML

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

SCSS

#chartjs-tooltip{
  background:#fff;
  box-shadow: 0 6px 8px 0 rgba(164, 164, 164, 0.3);
  border-radius:4px;  
}

JavaScript

var ctx = document.getElementById("myChart");

            var data = {
                datasets: [
                    {
                        data: [80, 20],
                        label: 'Carbs',
                        measure: 'g',
                        backgroundColor : ['#5d9cd2','#efefef']
                    },
                    {
                        data: [30, 70],
                        label: 'Protein',
                        measure: 'g',
                        backgroundColor : ['#8b1b92','#efefef']
                    },
                    {
                        data: [45, 55],
                        label: 'Fat',
                        measure: 'g',
                        backgroundColor : ['#00b6b5','#efefef']
                    },
                    {
                        data: [15, 85],
                        label: 'Sugar',
                        measure: 'g',
                        backgroundColor : ['#4b0c4e','#efefef']
                    }
                ],
            };
var options= {
		hover: {mode: null},
        tooltips: {
            // Disable the on-canvas tooltip
            enabled: false,
						callbacks: {
                        label: function (item, data) {
                            //console.log(item);
                            var label = data.datasets[item.datasetIndex].label;
                            var value = data.datasets[item.datasetIndex].data[0];
                            var measure = data.datasets[item.datasetIndex].measure;
                             var color = data.datasets[item.datasetIndex].backgroundColor[0];
                            
                            return label + ': ' + '<span class="color1_'+label+'" style="color:'+color+';">'+value+measure+'</span>';
                        }
                    },
            custom: function(tooltipModel) {
            console.log(tooltipModel);
                // Tooltip Element
                var tooltipEl =...