react-chartjs-2 Bar chart 옵션 추가 예제
import React from 'react'; import { Grid } from '@mui/material'; import { Chart, CategoryScale, LinearScale, PointElement, BarElement, Tooltip, Legend } from 'chart.js'; Chart.register(CategoryScale, LinearScale, PointElement, BarElement, Tooltip, Legend); const labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; const data = { labels: labels, datasets:..
2023. 7. 20.
react-chartjs-2 Bar chart 예제
import React from 'react'; import { Grid } from '@mui/material'; import { Bar } from 'react-chartjs-2'; const data = { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], datasets: [ { label: 'Dataset 1', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(54, 162, 235, 0.5)', // 푸른색 1 'rgba(54, 162, 235, 0.5)', // 푸른색 2 ], borderColor: [ 'rgba(54, 162, 235, 1)', // 푸른색 1 (테두리) 'rgba(54, 162, 2..
2023. 7. 20.
react-chartjs-2 Line 예제
import React from 'react'; import { useTheme } from '@mui/material/styles'; import { Line } from 'react-chartjs-2'; import { Chart, CategoryScale, LinearScale, PointElement, LineElement, Tooltip, Legend } from 'chart.js'; Chart.register(CategoryScale, LinearScale, PointElement, LineElement, Tooltip, Legend); const labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'N..
2023. 7. 19.