I have a doughnut chart in my html which displays the labels correctly on the outside using this plugin - chartjs-plugin-labels.

doughnut chart image

However, I am trying to add lines to point to the correct section/label. Is this possible?

Here is my javascript code:

public doughnutChartLabels = ["Female", "Male", "Not Recorded"];
  public doughnutChartData = [[40, 40, 10]];
  public doughtnutChartPlugins = [pluginDataLabels];
  public doughnutChartColors = [
    {
      backgroundColor: ["#e1477f", "#41D4AE", "#CBE1FF"],
    },
  ];
  public doughnutChartOptions = {
    cutoutPercentage: 40,
    aspectRatio: 1,
    title: {
      display: true,
      text: "Gender",
      fontSize: 18,
      fontColor: "#023d7d",
    },
    plugins: {
      labels: [
        {
          render: function (args) {
            return args.label   "\n"   args.value   "%";
          },
          position: "outside",
          fontColor: "#023d7d",
          fontSize: 12,
        },
      ],
    },
  };

Here is my html code:

        <canvas
          baseChart
          [data]="doughnutChartData"
          [labels]="doughnutChartLabels"
          [chartType]="'doughnut'"
          [legend]="false"
          [plugins]="doughtnutChartPlugins"
          [colors]="doughnutChartColors"
          [options]="doughnutChartOptions"
          height="120">
        </canvas>

CodePudding user response：

stackoverflow.com/a/60681669/2358409

This link from uminder fixed this