[Chartjs]-ChartJS v2 โ€“ Keep tooltip open when user click on a point of a multiple lines chart

3๐Ÿ‘

โœ…

Your problem is interesting, so I updated the jsfiddle. Let me know if you found a bug:

https://jsfiddle.net/bencarbon/jrpLh8pa/4/

Here is the new plugin:

var keepTooltipOpenPlugin = {

      beforeRender: function(chart) {

    // We are looking for bubble which owns "keepTooltipOpen" parameter.
        var datasets = chart.data.datasets;
        chart.pluginTooltips = [];
    var abscissaToShow = chart.data.keepShowing;
    abscissaToShow.forEach(function(element) {
      var activeArray = [];
      for (i = 0; i < datasets.length; i++) {
        if(!chart.getDatasetMeta(i).hidden)
                activeArray.push(chart.getDatasetMeta(i).data[element])
      }
      chart.pluginTooltips.push(new Chart.Tooltip({
                _chart: chart.chart,
                _chartInstance: chart,
                _data: chart.data,
                _options: chart.options.tooltips,
                _active: activeArray
              }, chart));
    });
}, // end beforeRender

      afterDatasetsDraw: function(chart, easing) {

          // Draw tooltips
          Chart.helpers.each(chart.pluginTooltips, function(tooltip) {
            tooltip.initialize();
            tooltip.update();
            tooltip.pivot();
            tooltip.transition(easing).draw();
          });


        } // end afterDatasetsDraw
    }

    Chart.pluginService.register(keepTooltipOpenPlugin);

0๐Ÿ‘

you could just use the events option:

chartOptions = {

            events: ["click", "mouseout"],

}

Leave a comment