How to create a line graph/chart in ReactJS?-CodePudding

const foodData = [ 
    { headerName: "Cake", field: "cake" }, 
    { headerName: "Sweets", field: "sweets" }, 
    { headerName: "Savoury", field: "savoury" },

return ( 
  <div className="Foods"> 
    <SearchBar onSubmit={setSearch} />
    <div 
       className="ag-theme-balham" 
       style={{ 
          height: "300px", 
        width: "1160px" 
         }} 
    > 
        <AgGridReact Foods 

          columnDefs={foodData} 

        rowData={rowData}
        /> 
    </div> 
  </div> 
)

If I wanted to make a line graph based on only two of the columns (Sweets and Savoury) and display it below that table, how would that be achieved? The only resource I found was if the user manually selects rows but I want it to be automatic.

CodePudding user response：

Here is some example what I use

import React from 'react';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';
import { Line } from 'react-chartjs-2';
import faker from 'faker';

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
);

export const options = {
  responsive: true,
  plugins: {
    legend: {
      position: 'top' as const,
    },
    title: {
      display: true,
      text: 'Chart.js Line Chart',
    },
  },
};

const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];

export const data = {
  labels,
  datasets: [
    {
      label: 'Dataset 1',
      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
      borderColor: 'rgb(255, 99, 132)',
      backgroundColor: 'rgba(255, 99, 132, 0.5)',
    },
    {
      label: 'Dataset 2',
      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
      borderColor: 'rgb(53, 162, 235)',
      backgroundColor: 'rgba(53, 162, 235, 0.5)',
    },
  ],
};

export function App() {
  return <Line options={options} data={data} />;
}

CodePudding user response：

React Highcharts : https://www.highcharts.com/blog/posts/frameworks/react/

Go through the docs, very easy to implement and well compatible with ReactJS.