67 lines
1.2 KiB
TypeScript
67 lines
1.2 KiB
TypeScript
import {
|
|
Chart as ChartJS,
|
|
ArcElement,
|
|
Tooltip,
|
|
Legend,
|
|
type ChartOptions,
|
|
} from 'chart.js'
|
|
import { Pie } from 'react-chartjs-2'
|
|
ChartJS.register(ArcElement, Tooltip, Legend)
|
|
|
|
export const ChartPie = () => {
|
|
const data = {
|
|
labels: [
|
|
'Pidana',
|
|
'Perdata',
|
|
'Perceraian',
|
|
'Surat Bisnis',
|
|
'Surat Tanah',
|
|
'Lainnya',
|
|
],
|
|
datasets: [
|
|
{
|
|
data: [33.7, 13, 22.8, 9.3, 9.3, 21.2],
|
|
backgroundColor: [
|
|
'#FFB300',
|
|
'#4CAF50',
|
|
'#3F51B5',
|
|
'#F44336',
|
|
'#2196F3',
|
|
'#FF9800',
|
|
],
|
|
hoverOffset: 4,
|
|
},
|
|
],
|
|
}
|
|
|
|
const options: ChartOptions<'pie'> = {
|
|
maintainAspectRatio: true,
|
|
responsive: false,
|
|
plugins: {
|
|
legend: {
|
|
position: 'right',
|
|
labels: {
|
|
usePointStyle: true,
|
|
pointStyle: 'circle',
|
|
padding: 20,
|
|
},
|
|
},
|
|
},
|
|
layout: {
|
|
padding: 0,
|
|
},
|
|
}
|
|
|
|
return (
|
|
<div className="h-[300px] w-full items-center justify-center rounded-lg bg-white p-5 text-center">
|
|
<h2 className="text-xl font-bold">Top 5 Konten</h2>
|
|
<Pie
|
|
height={225}
|
|
width={450}
|
|
data={data}
|
|
options={options}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|