score:1

Accepted answer

you can define a set of tooltip callback functions to obtain the desired result. this could look as follows:

tooltips: {
  callbacks: {
    title: (tooltipitems, data) => data.labels[tooltipitems[0].index],
    label: (tooltipitems, data) => 'count: ' + data.datasets[0].data[tooltipitems.index],
    footer: (tooltipitems, data) => ['', 'infos:'].concat(data.datasets[0].info[tooltipitems[0].index])
  }
}

note that in the footer callback, i return text that i defined in an array named info defined inside the data object.

datasets: [{
  ...
  info: [
    ['this is the description', 'for web-based search ...'],
    ['this is the description', 'for interviews ...']
  ]
}]

please have a look at your amended code below:

<html lang="en">

<head>
  <meta charset="utf-8">
  <title>project overview</title>
  <script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.7.1/chart.bundle.js"></script>
  <!-- load plotly.js into the dom -->
  <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>
<div class="container">
  <div class="row my-3">
    <div class="col">
      <p class="sansserif">
        <h3>project overview</h3>
      </p>
    </div>
  </div>

  <div class="row py-2">
    <div class="col-md-4 py-1">
      <div class="card" style="width: 33rem;">
        <div class="card-body">
          <canvas id="chdonut1"></canvas>
        </div>
      </div>
    </div>

    <script>
      /* chart.js chart examples */
      chart.pluginservice.register({
        beforedraw: function(chart) {
          var width = chart.chart.width,
            height = chart.chart.height,
            ctx = chart.chart.ctx;

          ctx.restore();
          var fontsize = (height / 124).tofixed(2);
          ctx.font = fontsize + "em sans-serif";
          ctx.textbaseline = "middle";

          var text = "";

          switch (chart.chart.canvas.id) {
            case "chdonut1":
              text = "method";
              break;
          }

          var textx = math.round((width - ctx.measuretext(text).width) / 2),
            texty = height / 2;

          ctx.filltext(text, textx, texty);
          ctx.save();
        }
      });
      // chart colors
      var colors = ['#007bff', '#28a745', '#333333', '#c3e6cb', '#dc3545', '#6c757d'];

      var donutoptions = {
        cutoutpercentage: 85,
        legend: {
          position: 'bottom',
          padding: 5,
          labels: {
            pointstyle: 'circle',
            usepointstyle: true
          }
        },
        tooltips: {
          callbacks: {
            title: (tooltipitems, data) => data.labels[tooltipitems[0].index],
            label: (tooltipitems, data) => 'count: ' + data.datasets[0].data[tooltipitems.index],
            footer: (tooltipitems, data) => ['', 'infos:'].concat(data.datasets[0].info[tooltipitems[0].index])
          }
        }
      };

      // donut 1
      var chdonutdata1 = {
        labels: ['web-based search', 'interviews'],
        datasets: [{
          backgroundcolor: colors.slice(0, 2),
          borderwidth: 0,
          data: [75, 25],
          info: [
            ['this is the description', 'for web-based search ...'],
            ['this is the description', 'for interviews ...']
          ]
        }]
      };

      var chdonut1 = document.getelementbyid("chdonut1");
      if (chdonut1) {
        new chart(chdonut1, {
          type: 'pie',
          data: chdonutdata1,
          options: donutoptions
        });
      }
    </script>

</html>


Related Query

More Query from same tag