How To Add Center-Text in Donut Chart Js

๐Ÿ‘:-1

You may find this helpfull to maintain the tooltips shown in a chart apart from the hover:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

<canvas id="canvas"></canvas>

<script>
        var ctx = document.getElementById("canvas").getContext("2d");

        var data = {
      labels: ["0","1","2"],
          datasets: [{
            label: "set1",
            data: [{
          x: 0,
          y: 50
          },{
                    x: 3,
          y: 15
          },{
          x: 2,
          y: 45
          }
            ],
            backgroundColor: "rgba(26,179,148,0.6)", //green

          }, {
            label: "set2",
             data: [{
          x: 0,
          y: 10
          },{
                    x: 1,
          y: 50
          },{
          x: 2,
          y: 45
          }
            ],
            backgroundColor: "rgba(255,100,100,0.6)", //red

          }],
        };

        var options = {
          scales: {
            yAxes: [{
              scaleLabel: {
                display: true,
                labelString: 'Y'
              }
            }],
            xAxes: [{
              scaleLabel: {
                display: true,
                labelString: 'X'
              }
            }]
          },
      tooltips: {
          enabled: true,
          mode: 'label',
          callbacks: {
              label: function(tooltipItems, data) {
                  //CA
                  if(tooltipItems.datasetIndex == 1 || tooltipItems.datasetIndex == 2)
                       return data.datasets[tooltipItems.datasetIndex].label +': ' + tooltipItems.yLabel;
                  else if(tooltipItems.datasetIndex == 0)
                       return "Marge globale" +': ' + tooltipItems.yLabel;
                   else
                       return data.datasets[tooltipItems.datasetIndex].label +': ' + tooltipItems.yLabel;
                        }
                    }
                },
          onClick: handleClick
        };

        var keepTooltipOpenPlugin = {

          beforeRender: function(chart) {
      
        // We are looking for bubble which owns "keepTooltipOpen" parameter.
            var datasets = chart.data.datasets;
            chart.pluginTooltips = [];
            for (i = 0; i < datasets.length; i++) {
              for (j = 0; j < datasets[i].data.length; j++) {
                if (datasets[i].data[j].keepTooltipOpen && !chart.getDatasetMeta(i).hidden) {
                //When we find one, we are pushing all informations to create the tooltip.
                  chart.pluginTooltips.push(new Chart.Tooltip({
                    _chart: chart.chart,
                    _chartInstance: chart,
                    _data: chart.data,
                    _options: chart.options.tooltips,
                    _active: [chart.getDatasetMeta(i).data[j]]
                  }, 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);
    
    var myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
        });

        function handleClick(evt) {
          var activeElement = myLineChart.getElementAtEvent(evt);
          if(activeElement.length>0){
        var values = myLineChart.data.datasets[activeElement[0]._datasetIndex].data[activeElement[0]._index];
            if(values.keepTooltipOpen)
            values.keepTooltipOpen = false;
        else
          values.keepTooltipOpen = true;
      }
        };
    
</script>

And to group the tooltips of the datasets in one.

Also, according to the docs you can set the position of the tooltip.

Leave a comment