Как добавить кастомную подсказку?

       var color = Chart.helpers.color;
             var barChartData = {
               labels: ['2021', '2031', '2035', '2044', '2038'],
               datasets: [{
                 label: 'Видобуток газу, млн куб. м/рік',
                 backgroundColor: '#4fc3f7',
                 data: [58, 35, 42, 50, 455],
                 barThickness: 18
               }, {
                 label: 'Видобуток конденсату. м/рік',
                 backgroundColor: '#ae52d4',
                 data: [45, 95, 385, 155, 44],
                 barThickness: 18
               }]
             };

             window.onload = function() {
               var firstdiagram = document.getElementById('generation').getContext('2d');

               window.myBar = new Chart(firstdiagram, {
                 type: 'bar',
                 data: barChartData,
                 options: {
                   categoryPercentage: 1,
                   responsive: true,
                   maintainAspectRatio: false,
                   plugins: {
                     legend: {
                       display: true,
                       position: 'top',
                       align: 'start',
                       labels: {

                         boxWidth: 12,
                         boxHeight: 12,
                         //padding: 40,
                         font: {
                           family: 'Roboto',
                           size: 16,

                         }
                       },
                       padding: {
                         bottom: 38
                       },
                     }
                   },
                   scales: {
                     y: {
                       ticks: {
                         color: '#333',
                         font: {
                           family: 'Roboto',
                           size: 16,
                           weight: 'bold'
                         },
                         // stepSize: 100
                       },
                       grid: {
                         borderWidth: 0,
                         lineWidth: 1
                       }
                     },
                     x: {
                       ticks: {
                         color: '#000',
                         font: {
                           family: 'Roboto',
                           size: 16,
                           weight: 'bold'
                         },
                         maxRotation: 45,
                         minRotation: 45
                       },
                       grid: {
                         borderWidth: 0,
                         lineWidth: 0
                       }
                     }
                   },
                   tooltips: {
                     mode: 'x-axis',
                   },
                 },
                 plugins: [
                   {
                     afterInit(chart) {
                       chart.legend._update = chart.legend.update;
                       chart.legend.update = function(...args) {
                         this._update(...args);
                         const padding = {
                           ...(this.options.padding || {})
                         };
                         this.height += Math.max(0, ~~padding.bottom);
                         this.width += Math.max(0, ~~padding.right);
                       };
                     },
                   },
                 ],
               });
             };

info__holder {
    height: 380px;
    }
[![введите сюда описание изображения][1]][1]

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="generation"></canvas>