I’m trying to use ChartJS to display a barchart on a webpage, which will be populated by a list of expenditure categories and the amounts a user has spent within those categories. However when I’m displaying the bar chart on the webpage, there’s no bars. Looking at other examples the only difference I can see is that mine is not displaying any labels at the bottom.

I’ve also tried a pie chart instead (since it would serve a similar function) and this time all the segments just have the same label.

Piechart not showing correct label on segment

The worst part of all this is I tried a line graph and that works just fine.

[Linegraph working] ()

These are my current imports & data sets I’m using (don’t worry about the handle functions, they work fine and output the correct data).

//Imports
import { Bar, Line, Pie } from "react-chartjs-2";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  PointElement,
  LineElement,
  ArcElement,
  Title,
  Tooltip,
  Legend,
} from "chart.js";

//Chart data
  const barChartData = {
    lables: ["Total one", "Total two"],
    datasets: [
      {
        label: "Transactions",
        data: handleGetCategoryTotals(),
        backgroundColor: ["rgba(255, 0, 0)", "rgba(0, 255, 0)"],
        hoverOffset: 7,
      },
    ],
  };

  const lineGraphData = {
    labels: handleGetDistinctCategories(),
    datasets: [
      {
        label: "Labels",
        data: handleGetCategoryTotals(),
        borderColor: "rgb(75, 192, 192)",
      },
    ],
  };

//Chart components
        <Line options={options} data={lineGraphData} />
        <Bar options = {options} data={barChartData} />
        <Pie options={options} data={barChartData} />

I’ve also attempted to set the “label” in the datasets array to be an array of strings but this just causes “Transactions” to become the string array but joined.