compare chart with 100%

Question

I want to compare data: [40, 100], value with 100% but my chart is not working like expected

here is how it should exactly look

I Hope you understand what I am trying to achieve

here is a https://jsfiddle.net/2r1894eb/

this is the section which i need to compare the database results with 100%

new Chart('multiDoughnutChart', {
  type: "doughnut",
  data: {
    labels: ['Profit', 'Income', 'Loss'],
    datasets: [{
        data: [40, 100],
        backgroundColor: ['lightgreen', '#EFEFEF'],
        borderWidth: 10,
        borderRadius: [10, 0]
      },
      {
        data: [25, 100],
        backgroundColor: ['lightcoral', '#EFEFEF'],
        borderWidth: 10,
        borderRadius: [10, 0]
      },
      {
        data: [50, 100],
        backgroundColor: ['lightblue', '#EFEFEF'],
        borderWidth: 10,
        borderRadius: [10, 0]
      }
    ]
  },
  options: {
    cutout: '30%',
    hover: {
      mode: null
    },
    plugins: {
      legend: {
        position: 'bottom',
        labels: {
          generateLabels: chart => chart.data.labels.map((label, i) => ({
            text: label,
            idx: i,
            fillStyle: chart.data.datasets[i].backgroundColor[0],
            strokeStyle: '#fff',
            hidden: !chart.isDatasetVisible(i)
          }))
        },
        onClick: (event, legendItem, legend) => {
          legend.chart.getDatasetMeta(legendItem.idx).hidden = legend.chart.isDatasetVisible(legendItem.idx);
          legend.chart.update();
        }
      },
      tooltip: {
        filter: tooltipItem => tooltipItem.dataIndex == 0,
        callbacks: {
          label: ctx => ctx.raw + '%',
          labelColor: ctx => ({
            backgroundColor: ['lightgreen', 'lightcoral', 'lightblue'][ctx.datasetIndex],
            borderWidth: 0,
          })
        }
      }
    }
  }
});

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<canvas id="multiDoughnutChart" style="max-height: 200px"></canvas>