superponer un label encima de una grafica chartjs y que tengan la misma posición in javascript

Para superponer un label encima de una gráfica Chart.js, puede utilizar la opción de plugin de Chart.js llamada "ChartDataLabels". Este plugin permite agregar etiquetas dentro de la gráfica con estilo personalizable, lo que significa que puede superponer etiquetas sobre cualquier chartjs.

Para agregar la opción de plugin de ChartDataLabels, asegúrese de tener la última versión de Chart.js y agregue ChartDataLabels a los plugins de la instancia de la gráfica de la siguiente manera:

index.tsx
import ChartDataLabels from 'chartjs-plugin-datalabels';

const myChart = new Chart(ctx, {
  type: 'bar',
  data: {...},
  options: {
    plugins: {
      datalabels: {
        color: '#fff',
        anchor: 'end',
        align: 'start',
        font: {
          weight: 'bold',
          size: 14,
        },
        formatter: function(value, context) {
          return value.toFixed(2) + '%';
        }
      }
    }
  }
});
431 chars
23 lines

En el ejemplo anterior, se agrega la opción de plugin "datalabels", que es la clave/fichero de ChartDataLabels. En el objeto "datalabels", puede configurar opciones para su etiqueta de Chart.js personalizada, como "color", "anchor" (posición de la etiqueta), "align" (alineación de la etiqueta), "font" (tamaño, estilo de fuente) y "formatter" (formato de la etiqueta).

Puede encontrar más información sobre las opciones de ChartDataLabels aquí: https://chartjs-plugin-datalabels.netlify.com/guide/options.html