ChartJS Graph Label Errors

Question

I am trying to use ChartJS, and as I have created my graph, I am seeing my labels be stacked on top of each other on the X-axis. As you can see in this graph image.

Originally, the X axis was supposed to contain "years", but as I first noticed the issue, I thought maybe it was just a targeting issue, which I then changed it from years to "ID", but as you can see, it is still stacked on top of one another. I do find it very odd that the Y axis is perfectly fine, but the X is not, as I did not do anything different to one or the other.

EDIT: Ok I figured out where the error is coming from, if you view the "THIS IS MY APP.JS"

Below I will be attaching a snippet of my code, hopefully this helps and we can find a solution together. Within the useState I have labels: [ChartData.map((data) => data.id)], . Although I found this is where it is coming from, I have yet to find a solution.

THIS IS MY APP.JS

import { useState, useEffect } from "react";
import BarChart from "./components/BarChart";
import { ChartData } from "./Data";
import LineChart from "./components/LineChart";


import React from "react";
import { Bar } from 'react-chartjs-2'

const App = () => {

  const [chartData, setChartData] = useState({
    // LABELS CAN BE CONSIDERED THE NAME ON THE X & Y AXIS 
    // IN THIS EXAMPLE, I HAVE YEARS AS DATA, 2016-2022, THIS WOULD BE LABEL 
    labels: [ChartData.map((data) => data.id)],
    datasets: [{
        label: "Users Gained",
        data: ChartData.map((data) => data.userGain)

    }],
})

  return (
    <>
        <div class="col-12">
            <h1 className="fs-6">WEBSITE VISITORS</h1>
            <BarChart chartData={chartData} />
        </div>
    </>
  )
}

export default App

THIS IS MY BARCHART.JS

import React from "react"
import { Bar } from 'react-chartjs-2'

import {Chart as ChartJS} from "chart.js/auto"

const BarChart = ({chartData}) => {

    return (
        <>
            <Bar data={chartData} />
        </>
    )
}

export default BarChart

THIS IS MY DATA.JS

export const ChartData = [
    {
        id: 1,
        year: 2016,
        userGain: 80000,
        userLost: 823,
    },
    {
        id: 2,
        year: 2017,
        userGain: 45677,
        userLost: 345,
    },
    {
        id: 3,
        year: 2018,
        userGain: 78888,
        userLost: 555,
    },
    {
        id: 4,
        year: 2019,
        userGain: 98437,
        userLost: 395,
    },
    {
        id: 5,
        year: 2020,
        userGain: 74638,
        userLost: 923,
    },
    {
        id: 6,
        year: 2021,
        userGain: 84732,
        userLost: 435,
    },
    {
        id: 7,
        year: 2022,
        userGain: 84738,
        userLost: 673,
    }
]

Answer 1

The way I resolved this was a "bandaid over the wound" solution. The dynamic mapping was not working for some reason, and I did not necessarily figure out how to resolve that. However, I did change it from mapping and hard coded that data inside instead and that fixed the issue.

So instead of labels: [ChartData.map((data) => data.id)] I went ahead and put labels: [2016, 2017, 2018, [...and so on]]

Although changing this did not resolve the dynamic mapping I had originally, I did resolve the visual appearance.