64 lines
1.1 KiB
TypeScript
64 lines
1.1 KiB
TypeScript
import React, { useState, useEffect } from 'react'
|
|
|
|
import { Bar, Line } from 'react-chartjs-2';
|
|
import {
|
|
Chart as ChartJS,
|
|
CategoryScale,
|
|
LinearScale,
|
|
BarElement,
|
|
Title,
|
|
Tooltip,
|
|
Legend
|
|
} from 'chart.js'
|
|
|
|
ChartJS.register(
|
|
CategoryScale,
|
|
LinearScale,
|
|
BarElement,
|
|
Title,
|
|
Tooltip,
|
|
Legend
|
|
)
|
|
|
|
export default function Graph() {
|
|
|
|
const [ graphData, setGraphData ] = useState({
|
|
labels: [],
|
|
datasets: [],
|
|
})
|
|
const [ graphOptions, setGraphOptions ] = useState({})
|
|
|
|
useEffect(() => {
|
|
setGraphData({
|
|
labels: ['John', 'kevin', 'george', 'michael', 'oreo'],
|
|
datasets: [{
|
|
label: "Whom'st let the dogsout",
|
|
data: [12, 55, 34, 120, 720],
|
|
borderColor: "rgb(53, 162, 235)",
|
|
backgroundColor: "rgb(53, 162, 235, 0.4)"
|
|
}]
|
|
})
|
|
setGraphOptions({
|
|
responsive: true,
|
|
plugins: {
|
|
legend: {
|
|
position: 'top'
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: "Whom'st let the dogsout"
|
|
}
|
|
}
|
|
})
|
|
}, [])
|
|
|
|
|
|
return (
|
|
<Line
|
|
options={graphOptions}
|
|
data={graphData}
|
|
// {}
|
|
/>
|
|
)
|
|
}
|