i am trying to impliment a bar chart what am i doing wrong here?

here also i am getting error saying to use typescript

formatter: (value: number) => value " %", but i use only .js format

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>
  );
}

CodePudding user response：

Seems like you are using typings in .js file.

Remove Typings from your formatter function

 formatter: (value) => value   " %", // Add the percentage after the value

Working StackBlitz