Estoy tratando de implementar un gráfico de barras. ¿Qué estoy haciendo mal aquí?

aquí también recibo un error que dice usar mecanografiado

formatter: (value: number) => value + " %", pero solo uso el formato .js

 import { Chart } from "chart.js"; import { Bar } from "react-chartjs-2"; import ChartjsPluginStacked100 from "chartjs-plugin-stacked100"; import "chart.js/auto"; import ChartDataLabels from "chartjs-plugin-datalabels"; Chart.register(ChartDataLabels); const ExampleChart = () => ( <Bar data={{ labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [ { label: "My First dataset", backgroundColor: "#EC932F", borderColor: "rgba(255,99,132,1)", borderWidth: 1, hoverBackgroundColor: "rgba(255,99,132,0.4)", hoverBorderColor: "rgba(255,99,132,1)", data: [65, 59, 80, 81, 56, 55, 100], borderRadius: 50, // Make Rectangle rounded }, ], }} options={{ indexAxis: "y", // Horizontal bar plugins: { datalabels: { formatter: (value: number) => value + " %", // Add the percentage after the value align: "end", anchor: "end", clip: true, // Hide label if outside of the chart }, }, scales: { x: { grid: { display: false, // Hide x grid }, }, y: { grid: { display: false, // Hide y grid }, }, }, }} /> ); export default function bar() { return ( <div className=""> <ExampleChart /> </div> ); }