Chartjs-Always show doughnut Chart tooltip in Angular 5

by

0👍

✅

Ok I was able to find an answer by using this as an example:
https://embed.plnkr.co/opFmFg34AyqVwgvdda0Z?show=preview

declare var Chart: any;

ngOnInit() : void{
Chart.pluginService.register({
    beforeDraw: (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: (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;
    }
  }
});
}

And I added:

showAllTooltips: true,

to the doughnutChartOptions

Ok, to add a border to tooltips just add:

borderColor: 'rgba(0,0,0,1)',
borderWidth: 1,
caretSize: 0,

carterSize 0 will also remove the carter so that you will get a nice rectangle.

Leave a comment