CODEWITHSUNDEEP
angularjsangular-chart
Interlated
Interlated

Reputation: 5926

How to show all tooltips when using angular-chart.js Chart.js 2

I would like to turn on all the tooltips in an angular-chart.js chart and then grab the updated image with html2canvas.

The showTooltip method is now not part of Chart.js.

This does not work. 

$scope.$on('chart-create', function (event, chart) {
    $scope.bondsChart = chart;
    console.log(chart);
});

$scope.downloadChartFn = function () {
  // *** No showTooltip function on Chart.js 2.3.
  $scope.bondsChart.showTooltip($scope.bondsChart.segments, true);

  // Yes http://stackoverflow.com/questions/36760712/html2canvas-conflict-in-mozila-firefox
  if (document.getElementById('green-bonds-bar-chart-stacked-canvas') !== null) {
      html2canvas(document.getElementById('green-bonds-bar-chart-stacked-canvas'), {
        onrendered: function (canvas) {
          var a = document.createElement("a");
          a.download = "chart.png";
          a.href = canvas.toDataURL("image/png");
          document.body.appendChild(a);
          a.click();
      }
   });
}

Upvotes: 0

Views: 2840

Answers (1)

Interlated
Interlated

Reputation: 5926

The chart plugin does work. Taken from this jsfiddle.

Just call the plugin using options

options: {
  showAllTooltips: true
}

I didn't end up using it as there is no algorithm to prevent the tooltips from overlapping.

In angular-charts i put it inside app.config.

app.config(['ChartJsProvider', function (ChartJsProvider) {
}

The plugin

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();
      });
      chart.options.tooltips.enabled = false;
    }
  }
})

Upvotes: 2

Related Questions