Chartjs-Chart.js Chart displays but no data

by

0👍

✅

your data in datasets params is not well formated,
try this:

const [chartData, setChartData] = useState({});
  const products = [
    { name: "PC", solds: 34 },
    { name: "Mouce", solds: 55 },
    { name: "keyboard", solds: 6 },
    { name: "Process", solds: 2 }
  ];
  const chart = () => {
    const dataValue = products.map(prod=>prod.solds);
    setChartData({
      labels: ["PC", "Mouse", "Keyboard", "Process"],
      datasets: [
        {
          label: "Level of Thiccness",
          data: dataValue,
          backgroundColor: ["rgba(75, 192, 192, 0.6)"],
          borderWidth: 4
        }
      ]
    });
  };

  useEffect(() => {
    chart();
  }, []);

  return (
    <div>
      <Line data={chartData} />
    </div>
  );

here you can find an example
UPDATE
you can do the same for your labels param:

const chart = () => {
    const dataValue = products.map((prod) => prod.solds);
    const labelList = products.map((prod) => prod.name);
    setChartData({
      labels: labelList,
      datasets: [
        {
          label: "Level of Thiccness",
          data: dataValue,
          backgroundColor: ["rgba(75, 192, 192, 0.6)"],
          borderWidth: 4
        }
      ]
    });

Leave a comment