Charts
Chart One
import { ApexOptions } from "apexcharts";
import React from "react";
import ReactApexChart from "react-apexcharts";
import DefaultSelectOption from "@/components/SelectOption/DefaultSelectOption";
const ChartOne: React.FC = () => {
const series = [
{
name: "Received Amount",
data: [0, 20, 35, 45, 35, 55, 65, 50, 65, 75, 60, 75],
},
{
name: "Due Amount",
data: [15, 9, 17, 32, 25, 68, 80, 68, 84, 94, 74, 62],
},
];
const options: ApexOptions = {
legend: {
show: false,
position: "top",
horizontalAlign: "left",
},
colors: ["#5750F1", "#0ABEF9"],
chart: {
fontFamily: "Satoshi, sans-serif",
height: 310,
type: "area",
toolbar: {
show: false,
},
},
fill: {
gradient: {
opacityFrom: 0.55,
opacityTo: 0,
},
},
responsive: [
{
breakpoint: 1024,
options: {
chart: {
height: 300,
},
},
},
{
breakpoint: 1366,
options: {
chart: {
height: 320,
},
},
},
],
stroke: {
curve: "smooth",
},
markers: {
size: 0,
},
grid: {
strokeDashArray: 5,
xaxis: {
lines: {
show: false,
},
},
yaxis: {
lines: {
show: true,
},
},
},
dataLabels: {
enabled: false,
},
tooltip: {
fixed: {
enabled: !1,
},
x: {
show: !1,
},
y: {
title: {
formatter: function (e) {
return "";
},
},
},
marker: {
show: !1,
},
},
xaxis: {
type: "category",
categories: [
"Sep",
"Oct",
"Nov",
"Dec",
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
],
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
},
yaxis: {
title: {
style: {
fontSize: "0px",
},
},
},
};
return (
<div className="col-span-12 rounded-[10px] bg-white px-7.5 pb-6 pt-7.5 shadow-1 dark:bg-gray-dark dark:shadow-card xl:col-span-7">
<div className="mb-3.5 flex flex-col gap-2.5 sm:flex-row sm:items-center sm:justify-between">
<div>
<h4 className="text-body-2xlg font-bold text-dark dark:text-white">
Payments Overview
</h4>
</div>
<div className="flex items-center gap-2.5">
<p className="font-medium uppercase text-dark dark:text-dark-6">
Short by:
</p>
<DefaultSelectOption options={["Monthly", "Yearly"]} />
</div>
</div>
<div>
<div className="-ml-4 -mr-5">
<ReactApexChart
options={options}
series={series}
type="area"
height={310}
/>
</div>
</div>
<div className="flex flex-col gap-2 text-center xsm:flex-row xsm:gap-0">
<div className="border-stroke dark:border-dark-3 xsm:w-1/2 xsm:border-r">
<p className="font-medium">Received Amount</p>
<h4 className="mt-1 text-xl font-bold text-dark dark:text-white">
$45,070.00
</h4>
</div>
<div className="xsm:w-1/2">
<p className="font-medium">Due Amount</p>
<h4 className="mt-1 text-xl font-bold text-dark dark:text-white">
$32,400.00
</h4>
</div>
</div>
</div>
);
};
export default ChartOne;
Chart Two
import { ApexOptions } from "apexcharts";
import React from "react";
import ReactApexChart from "react-apexcharts";
import DefaultSelectOption from "@/components/SelectOption/DefaultSelectOption";
const ChartTwo: React.FC = () => {
const series = [
{
name: "Sales",
data: [44, 55, 41, 67, 22, 43, 65],
},
{
name: "Revenue",
data: [13, 23, 20, 8, 13, 27, 15],
},
];
const options: ApexOptions = {
colors: ["#5750F1", "#0ABEF9"],
chart: {
fontFamily: "Satoshi, sans-serif",
type: "bar",
height: 335,
stacked: true,
toolbar: {
show: false,
},
zoom: {
enabled: false,
},
},
responsive: [
{
breakpoint: 1536,
options: {
plotOptions: {
bar: {
borderRadius: 3,
columnWidth: "25%",
},
},
},
},
],
plotOptions: {
bar: {
horizontal: false,
borderRadius: 3,
columnWidth: "25%",
borderRadiusApplication: "end",
borderRadiusWhenStacked: "last",
},
},
dataLabels: {
enabled: false,
},
grid: {
strokeDashArray: 5,
xaxis: {
lines: {
show: false,
},
},
yaxis: {
lines: {
show: true,
},
},
},
xaxis: {
categories: ["M", "T", "W", "T", "F", "S", "S"],
},
legend: {
position: "top",
horizontalAlign: "left",
fontFamily: "Satoshi",
fontWeight: 500,
fontSize: "14px",
markers: {
radius: 99,
width: 16,
height: 16,
strokeWidth: 10,
strokeColor: "transparent",
},
},
fill: {
opacity: 1,
},
};
return (
<div className="col-span-12 rounded-[10px] bg-white px-7.5 pt-7.5 shadow-1 dark:bg-gray-dark dark:shadow-card xl:col-span-5">
<div className="mb-4 justify-between gap-4 sm:flex">
<div>
<h4 className="text-body-2xlg font-bold text-dark dark:text-white">
Profit this week
</h4>
</div>
<div>
<DefaultSelectOption options={["This Week", "Last Week"]} />
</div>
</div>
<div>
<div id="chartTwo" className="-ml-3.5">
<ReactApexChart
options={options}
series={series}
type="bar"
height={370}
/>
</div>
</div>
</div>
);
};
export default ChartTwo;
Chart Three
import { ApexOptions } from "apexcharts";
import React from "react";
import ReactApexChart from "react-apexcharts";
import DefaultSelectOption from "@/components/SelectOption/DefaultSelectOption";
const ChartThree: React.FC = () => {
const series = [65, 34, 12, 56];
const options: ApexOptions = {
chart: {
fontFamily: "Satoshi, sans-serif",
type: "donut",
},
colors: ["#5750F1", "#5475E5", "#8099EC", "#ADBCF2"],
labels: ["Desktop", "Tablet", "Mobile", "Unknown"],
legend: {
show: false,
position: "bottom",
},
plotOptions: {
pie: {
donut: {
size: "80%",
background: "transparent",
labels: {
show: true,
total: {
show: true,
showAlways: true,
label: "Visitors",
fontSize: "16px",
fontWeight: "400",
},
value: {
show: true,
fontSize: "28px",
fontWeight: "bold",
},
},
},
},
},
dataLabels: {
enabled: false,
},
responsive: [
{
breakpoint: 2600,
options: {
chart: {
width: 415,
},
},
},
{
breakpoint: 640,
options: {
chart: {
width: 200,
},
},
},
],
};
return (
<div className="col-span-12 rounded-[10px] bg-white px-7.5 pb-7 pt-7.5 shadow-1 dark:bg-gray-dark dark:shadow-card xl:col-span-5">
<div className="mb-9 justify-between gap-4 sm:flex">
<div>
<h4 className="text-body-2xlg font-bold text-dark dark:text-white">
Used Devices
</h4>
</div>
<div>
<DefaultSelectOption options={["Monthly", "Yearly"]} />
</div>
</div>
<div className="mb-8">
<div className="mx-auto flex justify-center">
<ReactApexChart options={options} series={series} type="donut" />
</div>
</div>
<div className="mx-auto w-full max-w-[350px]">
<div className="-mx-7.5 flex flex-wrap items-center justify-center gap-y-2.5">
<div className="w-full px-7.5 sm:w-1/2">
<div className="flex w-full items-center">
<span className="mr-2 block h-3 w-full max-w-3 rounded-full bg-blue"></span>
<p className="flex w-full justify-between text-body-sm font-medium text-dark dark:text-dark-6">
<span> Desktop </span>
<span> 65% </span>
</p>
</div>
</div>
<div className="w-full px-7.5 sm:w-1/2">
<div className="flex w-full items-center">
<span className="mr-2 block h-3 w-full max-w-3 rounded-full bg-blue-light"></span>
<p className="flex w-full justify-between text-body-sm font-medium text-dark dark:text-dark-6">
<span> Tablet </span>
<span> 34% </span>
</p>
</div>
</div>
<div className="w-full px-7.5 sm:w-1/2">
<div className="flex w-full items-center">
<span className="mr-2 block h-3 w-full max-w-3 rounded-full bg-blue-light-2"></span>
<p className="flex w-full justify-between text-body-sm font-medium text-dark dark:text-dark-6">
<span> Mobile </span>
<span> 45% </span>
</p>
</div>
</div>
<div className="w-full px-7.5 sm:w-1/2">
<div className="flex w-full items-center">
<span className="mr-2 block h-3 w-full max-w-3 rounded-full bg-blue-light-3"></span>
<p className="flex w-full justify-between text-body-sm font-medium text-dark dark:text-dark-6">
<span> Unknown </span>
<span> 12% </span>
</p>
</div>
</div>
</div>
</div>
</div>
);
};
export default ChartThree;
Last updated
