47 lines
1.2 KiB
React
47 lines
1.2 KiB
React
import React, { useState } from "react";
|
|
import Chart from "react-apexcharts";
|
|
|
|
const Piechart = () => {
|
|
const [series, setSeries] = useState([35.1, 23.5, 2.4, 5.4]);
|
|
|
|
const chartOptions = {
|
|
series: series,
|
|
labels: ["Fertilizers", "Pestisides", "Manner", "Urea"],
|
|
colors: ["#1C64F2", "#16BDCA", "#FDBA8C", "#E74694"],
|
|
chart: {
|
|
type: "donut",
|
|
height: 320,
|
|
},
|
|
plotOptions: {
|
|
pie: {
|
|
donut: {
|
|
labels: {
|
|
show: true,
|
|
total: {
|
|
show: true,
|
|
label: "Total",
|
|
formatter: function (w) {
|
|
return w.globals.seriesTotals.reduce((a, b) => a + b, 0) + "k";
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
legend: {
|
|
position: "bottom",
|
|
},
|
|
};
|
|
|
|
return (
|
|
<div className="bg-white md:p-6 block max-w-sm p-6 bg-no-repeat bg-center bg-cover border border-gray-200 rounded-lg shadow-sm hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
|
|
<h5 className="text-xl font-bold text-gray-900 dark:text-white mb-4 ">
|
|
Farm Info
|
|
</h5>
|
|
<Chart options={chartOptions} series={series} type="donut" height={320} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Piechart;
|