React -Chartjs

npm i --save react-chartjs-2 chart.js

https://www.npmjs.com/package/react-chartjs-2

 

Bar

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

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

export default BarChart;

App

import React from "react";
import BarChart from "./Components/BarChart";
import RadarChart from "./Components/RadarChart";
import LineChart from "./Components/LineChart";
import PieChart from "./Components/PieChart";
import Chart from "chart.js/auto";

const data = {
  labels: ["# IT", "# 식습관", "# 자격증", "# 독서", "# 독서", "# 독서"],
  datasets: [
    {
      label: "당신의 습관",
      data: [40, 2, 1, 13, 20, 3],
      backgroundColor: "rgb(233, 229, 27)",
      borderColor: "#fdcf00",
      borderWidth: 1,
    },
    {
      label: "다른 사람의 습관",
      data: [25, 40, 23, 22, 41, 21],
      backgroundColor: "rgb(197, 197, 197)",
      borderColor: "#c5c1c2",
      borderWidth: 1,
    },
  ],
};

const data2 = {
  labels: ["# IT", "# 식습관", "# 자격증", "# 독서", "# 독서", "# 독서"],
  datasets: [
    {
      label: "다른 사람의 습관",
      data: [6, 1, 1, 1, 1, 1],
      backgroundColor: [
        "rgba(75,192,192,1)",
        "#ecf0f1",
        "#50AF95",
        "#f3ba2f",
        "#2a71d0",
        "#000",
      ],
      borderColor: "#c5c1c2",
      borderWidth: 10,
    },
  ],
};
export default function App() {
  return (
    <div
      style={{
        width: "700px",

        gap: "50px",
      }}
    >
      <BarChart chartData={data} />
      <RadarChart chartData={data} />
      <LineChart chartData={data} />
      <PieChart chartData={data2} />
    </div>
  );
}

겪은문제점중에 catrgory부터 시작해서 linear 등 모든게 import가 제대로 안되었다고 했는데

아래를 import 해주니까 해결되었다.

import Chart from "chart.js/auto";