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

write a code for use chart.js in react with components

Agreeable Anteater answered on June 17, 2023 Popularity 8/10 Helpfulness 7/10

answer write a code for use chart.js in react with components

write a code for use chart.js in react with components

Comment

import React, { useEffect, useRef } from 'react';
import Chart from 'chart.js';

const BarChart = ({ data }) => {
  const chartRef = useRef(null);

  useEffect(() => {
    const ctx = chartRef.current.getContext('2d');

    new Chart(ctx, {
      type: 'bar',
      data: {
        labels: data.labels,
        datasets: [
          {
            label: data.title,
            data: data.values,
            backgroundColor: 'rgba(75, 192, 192, 0.6)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1,
          },
        ],
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          y: {
            beginAtZero: true,
          },
        },
      },
    });
  }, [data]);

  return <canvas ref={chartRef} />;
};

export default BarChart;

Popularity 8/10 Helpfulness 7/10 Language javascript

Source: chat.openai.com

Tags: chart.js components javascript

Link to this answer
Share Copy Link

Contributed on Jun 17 2023

Agreeable Anteater

0 Answers Avg Quality 2/10

write a code for use chart.js in react with components

Contents

More Related Answers

write a code for use chart.js in react with components

Grepper

Documentation

Social

Legal

Contact

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