tooltip

by dqdqdq

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.2.0/dist/chartjs-plugin-datalabels.min.js"></script>
<canvas id="myChart"></canvas>

CSS

html, body {
  height: 90%;
  width: 90%;
}

JavaScript

var ctx = document.getElementById('myChart').getContext('2d');

var myChart = new Chart(ctx, {

    type: 'bubble',

    data: {
        datasets: [
            {
                label: 'Top',
                data: [
                    {x: 110, y: 0, r: 10, name: "Performance"}
                ],
                backgroundColor: "rgba(153,255,51,0.6)"
            },
            {
                label: 'Average',
                data: [
                    {x: 75, y: 0, r: 10, name: "Performance"}
                ],
                backgroundColor: "rgba(153,155,51,0.6)"
            },
        ]
    },
    pointDot : true,
    options: {
        tooltips:{
        	footerFont: {weight: 'normal'},
          callbacks: {
            footer: function(tooltipItem, data) {
              return 'some text'
            }
          }
        },    
    }

});