38 lines
836 B
TypeScript
38 lines
836 B
TypeScript
"use client"
|
|
import React from "react"
|
|
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js"
|
|
import { Pie } from "react-chartjs-2"
|
|
|
|
ChartJS.register(ArcElement, Tooltip, Legend)
|
|
|
|
type Props = {
|
|
labels: string[]
|
|
data: number[]
|
|
backgroundColor?: string[]
|
|
}
|
|
|
|
export default function PieChart({ labels, data: values, backgroundColor }: Props) {
|
|
const data = {
|
|
labels,
|
|
datasets: [
|
|
{
|
|
data: values,
|
|
backgroundColor: backgroundColor || ["#4ade80", "#60a5fa", "#f97316", "#f43f5e"],
|
|
hoverOffset: 6,
|
|
},
|
|
],
|
|
}
|
|
|
|
const options = {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: { legend: { position: "right" as const } },
|
|
}
|
|
|
|
return (
|
|
<div style={{ width: "100%", minHeight: 220 }}>
|
|
<Pie data={data} options={options} />
|
|
</div>
|
|
)
|
|
}
|