[Solved]-Showing Percentage and Total In stacked Bar Chart of chart.js-Chart.js

// label formatter function
const formatter = (value, ctx) => {
  const otherdatasetindex = ctx.datasetindex === 0 ? 1 : 0;
  const total =
    ctx.chart.data.datasets[otherdatasetindex].data[ctx.dataindex] + value;

  return `${(value / total * 100).tofixed(0)}%`;
};

const data = [{
    // stack: 'test',
    label: "new",
    backgroundcolor: "#1d3f74",
    data: [6310, 5742, 4044, 5564],
    // change options only for labels of this dataset
    datalabels: {
      color: "white",
      formatter: formatter
    }
  },
  {
    // stack: 'test',
    label: "repeat",
    backgroundcolor: "#6c92c8",
    data: [11542, 12400, 12510, 11450],
    // change options only for labels of this dataset
    datalabels: {
      color: "yellow",
      formatter: formatter
    }
  }
];

const options = {
  maintainaspectratio: false,
  spangaps: false,
  responsive: true,
  legend: {
    display: true,
    position: "bottom",
    labels: {
      fontcolor: "#fff",
      boxwidth: 14,
      fontfamily: "proximanova"
    }
  },
  tooltips: {
    mode: "label",
    callbacks: {
      label: function(tooltipitem, data) {
        const type = data.datasets[tooltipitem.datasetindex].label;
        const value =
          data.datasets[tooltipitem.datasetindex].data[tooltipitem.index];
        let total = 0;
        for (let i = 0; i < data.datasets.length; i++)
          total += data.datasets[i].data[tooltipitem.index];
        if (tooltipitem.datasetindex !== data.datasets.length - 1) {
          return (
            type + " : " + value.tofixed(0).replace(/(\d)(?=(\d{3})+\.)/g, "1,")
          );
        } else {
          return [
            type +
            " : " +
            value.tofixed(0).replace(/(\d)(?=(\d{3})+\.)/g, "1,"),
            "overall : " + total
          ];
        }
      }
    }
  },
  plugins: {
    // change options for all labels of this chart
    datalabels: {
      color: "#white",
      align: "center"
    }
  },
  scales: {

    xaxes: [{
        stacked: true,
        gridlines: {
          display: false
        },
        ticks: {
          fontcolor: "#fff"
        }
      },
      {
        type: 'category',
        offset: true,
        position: 'top',
        ticks: {
          fontcolor: "#fff",
          callback: function(value, index, values) {
            return data[0].data[index] + data[1].data[index]
          }
        }
      }
    ],
    yaxes: [{
      stacked: true,
      display: false,
      ticks: {
        fontcolor: "#fff"
      }
    }]
  }
};

const ctx = document.getelementbyid("mychart").getcontext("2d");

new chart(ctx, {
  type: "bar",
  data: {
    labels: ["jun", "july", "aug", "sept"],
    datasets: data
  },
  options: options
});

body {
  background: #20262e;
  font-family: helvetica;
  padding-top: 50px;
}

#mychart {
  height: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.7.2/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.4.0/dist/chartjs-plugin-datalabels.min.js"></script>

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