/* eslint-disable jsx-a11y/anchor-is-valid */ import React, {useEffect, useRef} from 'react' import ApexCharts, {ApexOptions} from 'apexcharts' import {getCSS, getCSSVariableValue} from '../../../assets/ts/_utils' type Props = { className: string } const ChartsWidget6: React.FC = ({className}) => { const chartRef = useRef(null) useEffect(() => { if (!chartRef.current) { return } const height = parseInt(getCSS(chartRef.current, 'height')) const chart = new ApexCharts(chartRef.current, getChartOptions(height)) if (chart) { chart.render() } return () => { if (chart) { chart.destroy() } } }, [chartRef]) return (
{/* begin::Header */}

Recent Orders More than 500+ new orders

{/* begin::Toolbar */}
Sales Expenses
{/* end::Toolbar */}
{/* end::Header */} {/* begin::Body */}
{/* begin::Chart */}
{/* end::Chart */}
{/* end::Body */}
) } export {ChartsWidget6} function getChartOptions(height: number): ApexOptions { const labelColor = getCSSVariableValue('--bs-gray-500') const borderColor = getCSSVariableValue('--bs-gray-200') const baseColor = getCSSVariableValue('--bs-primary') const baseLightColor = getCSSVariableValue('--bs-light-primary') const secondaryColor = getCSSVariableValue('--bs-info') return { series: [ { name: 'Net Profit', type: 'bar', data: [40, 50, 65, 70, 50, 30], }, { name: 'Revenue', type: 'bar', data: [20, 20, 25, 30, 30, 20], }, { name: 'Expenses', type: 'area', data: [50, 80, 60, 90, 50, 70], }, ], chart: { fontFamily: 'inherit', stacked: true, height: 350, toolbar: { show: false, }, }, plotOptions: { bar: { horizontal: false, borderRadius: 5, columnWidth: '12%', }, }, legend: { show: false, }, dataLabels: { enabled: false, }, stroke: { curve: 'smooth', show: true, width: 2, colors: ['transparent'], }, xaxis: { categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], axisBorder: { show: false, }, axisTicks: { show: false, }, labels: { style: { colors: labelColor, fontSize: '12px', }, }, }, yaxis: { max: 120, labels: { style: { colors: labelColor, fontSize: '12px', }, }, }, fill: { opacity: 1, }, states: { normal: { filter: { type: 'none', value: 0, }, }, hover: { filter: { type: 'none', value: 0, }, }, active: { allowMultipleDataPointsSelection: false, filter: { type: 'none', value: 0, }, }, }, tooltip: { style: { fontSize: '12px', }, y: { formatter: function (val) { return '$' + val + ' thousands' }, }, }, colors: [baseColor, secondaryColor, baseLightColor], grid: { borderColor: borderColor, strokeDashArray: 4, yaxis: { lines: { show: true, }, }, padding: { top: 0, right: 0, bottom: 0, left: 0, }, }, } }