Breaking News: Grepper is joining You.com. Read the official announcement!

react chart.js

Add Answer

Mystic Dev answered on January 14, 2022 Popularity 10/10 Helpfulness 3/10

answer react chart.js

related chart js react

related react-chartjs-2

react chart.js

Comment

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>
  );
}

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: chart.js javascript

Link to this answer
Share Copy Link

Contributed on Jan 16 2022

Mystic Dev

0 Answers Avg Quality 2/10

Closely Related Answers

chart js react

Comment

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

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jan 14 2022

Mystic Dev

0 Answers Avg Quality 2/10

react-chartjs-2

Comment

yarn add chart.js react-chartjs-2

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: react-chartjs-2.netlify.app

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jan 16 2022

Mystic Dev

0 Answers Avg Quality 2/10

react chart.js

Contents

More Related Answers

react chart.js

Closely Related Answers

chart js react

react-chartjs-2

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.