Multi tooltip on hover

by codingmi

HTML

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

PLEASE MAKE THE MULTI TOOLTIP ALWAYS SHOW (NO HOVER) 

-- Here's a thread that I might just be too n00b to decipher (or older version of chartjs...)
https://stackoverflow.com/questions/33793540/chart-js-always-show-tooltips-in-a-multi-dataset-line-chart


-- The original thread for single tooltips (using pie charts, which isn't even the right type of chart)
https://github.com/chartjs/Chart.js/issues/1861

-- General tooltip documentation
https://www.chartjs.org/docs/latest/configuration/tooltip.html


-->

JavaScript

var ctx = document.getElementById('myChart').getContext('2d')
          // Chart.pluginService.register({
          //   beforeRender: function (chart) {
          //     if (chart.config.options.showAllTooltips) {
          //       // create an array of tooltips
          //       // we can't use the chart tooltip because there is only one tooltip per chart
          //       chart.pluginTooltips = [];
          //       chart.config.data.datasets.forEach(function (dataset, i) {
          //         chart.getDatasetMeta(i).data.forEach(function (sector, j) {
          //           chart.pluginTooltips.push(new Chart.Tooltip({
          //             _chart: chart.chart,
          //             _chartInstance: chart,
          //             _data: chart.data,
          //             _options: chart.options.tooltips,
          //             _active: [sector]
          //           }, chart));
          //         });
          //       });

          //       // turn off normal tooltips
          //       chart.options.tooltips.enabled = false;
          //     }
          //   },
          //   afterDraw: function (chart, easing) {
          //     if (chart.config.options.showAllTooltips) {
          //       // we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
          //       if (!chart.allTooltipsOnce) {
          //         if (easing !== 1)
          //           return;
          //         chart.allTooltipsOnce = true;
          //       }

          //       // turn on tooltips
          //       chart.options.tooltips.enabled = true;
          //       Chart.helpers.each(chart.pluginTooltips, function (tooltip) {
          //         tooltip.initialize();
          //         tooltip.update();
          //         // we don't actually need this since we are not animating tooltips
          //         tooltip.pivot();
          //         tooltip.transition(easing).draw();
          //     ...