Show x axis label on top of stacked bar and custom tooltip on chart js

I want to show the total value and x axis label on top of my stacked bar chart so it look like this

but right now, i'm only can show the total value, i don't know how to add the x axis label, so far mine look like this

i'm also want to custom my tooltip to look like this

Here's my code:

export default {
  name: 'BarAllYear',
  data() {
      return {
        BarAllYearData,
      };
    },
  mounted() {
      const ctx = document.getElementById('bar-all-year').getContext('2d');
      const BarChart = {
        type: 'bar',
        data: this.BarAllYearData,
        plugins: [ChartDataLabels],
        options: {
          borderWidth: 1,
          responsive: true,
          plugins: {
              legend: {
                  display: false,
              },
              tooltip: {
                  xAlign: 'center',
                  yAlign: 'bottom',
                  backgroundColor: '#FFF',
                  displayColors: false,
                  titleFont: {
                    size: 20,
                  },
                  bodyFont: {
                    size: 18,
                  },
                  titleColor(tooltipItem) {
                      const titleLabelColor = tooltipItem.tooltip.labelColors[0].backgroundColor;
                      return titleLabelColor;
                  },
                  bodyColor() {},
              },
              datalabels: {
                color: '#666666',
                align: 'top',
                anchor: 'end',
                offset: 1,
                formatter(value, context) {
                  const sumValue = context.chart.config.data.datasets.map((datapoint) => datapoint.data[context.dataIndex]);
                  function totalSum(total, datapoint) {
                    return total + datapoint;
                  }
                  const sum = sumValue.reduce(totalSum, 0);
                  return `${sum}`;
                },
                font: {
                  weight: 'bold',
                  size: 16,
                },
              },
          },
          scales: {
            x: {
              ticks: {
                  color: 'black',
                  font: {
                      weight: 'bold',
                      size: 16,
                  },
              },
              stacked: true,
            },
            y: {
              ticks: {
                stepSize: 1,
                font: {
                  size: 18,
                },
              },
              stacked: true,
            },
          },
          layout: {
              padding: 20,
          },
        },
      };

      /* eslint-disable no-new */
      new Chart(ctx, BarChart);
    },
};

and this is the BarAllYearData:

 const DonutAllYearData = {
  labels: [
    'Butuh Perhatian Khusus',
    'Dalam Proses',
    'Selesai',
  ],
  datasets: [{
    label: 'My First Dataset',
    data: [16, 3, 5],
    backgroundColor: [
      '#FF7A00',
      '#23C4DB',
      '#666666',
    ],
    hoverOffset: 4,
  }],
};

export default DonutAllYearData;

I'm using vue 3 by the way.

Anyway, thanks for the help