React chart.js

Chart js react

yarn add react-chartjs-2 chart.js // npm install  react-chartjs-2 chart.js

React chart.js

import { useState, useEffect, useRef } from "react";
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
import { Pie } from "react-chartjs-2";

ChartJS.register(ArcElement, Tooltip, Legend);

export const data = {
  labels: ["Case on Hold", "Submitted", "In Production", "Shipped"],
  datasets: [
    {
      label: "# of Votes",
      data: [12, 19, 3, 5],
      backgroundColor: ["#F2CC59", "#BA68C8", "#407BFF", "#E6E5E6"],
      borderColor: ["#F2CC59", "#BA68C8", "#407BFF", "#E6E5E6"],
      borderWidth: 1,
    },
  ],
};

const pieOptions = {
  plugins: {
    legend: {
      display: false,
      labels: {
        font: {
          size: 12,
        },
      },
    },
  },
};

export default function ChartView() {
  const [charView, setChatView] = useState<any>([]);
  const summaryRef: any = useRef(null);

  useEffect(() => {
    setChatView(summaryRef?.current?.legend?.legendItems);
  }, []);

  return (
    <div>
		<Pie data={data} options={pieOptions} ref={summaryRef} />    
        {charView?.map((data: any, i: number) => (
          <Box display="flex" sx={{ mt: 2 }} key={i}>
                        <Box
              sx={{
                  height: 16,
                  width: 16,
                  background: `${data?.fillStyle}`,
                  borderRadius: 5,
                  mr: 0.5,
                  }}
              />
              	<Typography variant="body2"> {data?.text}</Typography>
              </Box>
		))}
    </div>
  );
}

Similar codes

0 vote335 views1 answer
How is react different from normal js
Javascript React
0 vote340 views1 answer
Decrease touchableopacity in react native
Javascript React
0 vote339 views1 answer
How to stop server of react js
Javascript React
17 votes307 views6 answers
React native build android
Javascript React
78 votes339 views6 answers
React router redirect
Javascript React
0 vote340 views1 answer
Get all database react native
Javascript React
0 vote388 views1 answer
React-hook-form image
Javascript React
5 votes335 views1 answer
React native text wrap
Javascript React
0 vote368 views1 answer
React show new app
Javascript React
1 vote344 views1 answer
How to connect socket in react js
Javascript React