Chartjs-Chart js always show labels on a doughnut chart

1👍

Using the plugin from this github issue seems to work, assuming you are on the latest version of chartjs (2.7.1 at the time of this answer)

here is a fiddle with working plugin: https://jsfiddle.net/Lngyxg3r/

here is the code from that fiddle:

html:

<canvas id="pie-chart"></canvas>

js:

        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;
                }
            }
        });

 function showPieChart(){
    var config = {
      type: 'doughnut',
      data: {
        datasets: [{
          data: [50,25,15,10],
          backgroundColor: ['#585ba7','#999acb','#8ac0e9','#363e96'],
          label: 'Dataset 1'
        }],
        labels: ['Token Sale','Foundation','Early Contributors','Team & Advisors']
      },
      options: {
        tooltipTemplate: "<%= value %>",
        showTooltips: true,
                showAllTooltips: true,
        onAnimationComplete: function() {
          this.showTooltip(this.datasets[0].points, true);
        },
        tooltipEvents: [],
        cutoutPercentage: 90,
        layout: {
          padding: {
            left: 0,
            right: 0,
            top: 0,
            bottom: 0
          }
        },
        responsive: true,
        legend: {
          display: false,
        },
        title: {
          display: false,
        },
        animation: {
          animateRotate: true,
          duration: 1000,
          animateScale: true,
          animationSteps: 15
        }
      }
    };
    var ctx = $("#pie-chart").get(0).getContext("2d");
    Chart.defaults.global.maintainAspectRatio = false;
    window.myDoughnut = new Chart(ctx, config);
  }
  showPieChart();

Leave a comment