JSFiddle - React, Tailwind, and code Playground

by Mateus Junges

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

JavaScript

var ctx = $('#myChart');

var data = {
        labels : [ "Jan/16", "Feb/16", "Mar/16", "Abr/16", "May/16", "Jun/16", "Jul/16" ],
        datasets : [ {
            type : 'bar',
            label : "Revenue (US$)",
            data : [ 4000, 4800, 5000, 7000, 1000, 5000, 1580 ],
            backgroundColor : 'rgba(0, 0, 255, 0.3)'
        } ]
    };

var myChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
  	responsive : true,
            tooltips : {

                callbacks : { 
                    title : function() {
                        return 'My tooltip custom title';
                    },
                    beforeLabel : function(tooltipItem, data) {
                        return 'Month ' + ': ' + tooltipItem.xLabel;
                    },
                    label : function(tooltipItem, data) {
                        return data.datasets[tooltipItem.datasetIndex].label + ': ' + tooltipItem.yLabel;
                    },
                    afterLabel : function(tooltipItem, data) {
                        return '***** My custom bottom *****';
                    },
                },
  }
  }
});