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.