How to underline labels on a Doughnut/Pie chart in the Chart.js library

Question

I want my chart to have these blue underlines of the labels that point to the corresponding section in the chart.

Desired view

I tried 2 methods but with no effect:

using callbacks

options: {
    plugins: {
      tooltip: {
        callbacks: {
          label: function(context) {
            // Get the label text
            var label = context.label;

            // Add an underline to the label text
            label = '<u>' + label + '</u>';

            // Return the modified label text
            return label;
          }
        }
      }
    }
  }

using callbacks again

 options: {
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          // Get the label text
          var label = data.labels[tooltipItem.index];

          // Add an underline to the label text
          label = '<u>' + label + '</u>';

          // Return the modified label text
          return label;
        }
      }
    }
  }

Answer 1

You need to add a custom callback function which creates an underline of the label.

For that you need to add afterBody callback :

callbacks: {
      afterBody: function(tooltipItems) {
        return '_________';
      }
    }

For effect of underline you can also set CSS for that :

Example:

.chartjs-tooltip:after {
  content: '';
  display: block;
  border-bottom: 1px solid blue;
}