// ** MUI Imports import Box from '@mui/material/Box' import Card from '@mui/material/Card' import { useTheme } from '@mui/material/styles' import Typography from '@mui/material/Typography' import CardContent from '@mui/material/CardContent' // ** Third Party Imports import { ApexOptions } from 'apexcharts' // ** Custom Components Imports import ReactApexcharts from 'src/@core/components/react-apexcharts' // ** Util Import import { hexToRGBA } from 'src/@core/utils/hex-to-rgba' const series = [{ data: [0, 20, 5, 30, 15, 45] }] const AnalyticsSessions = () => { // ** Hook const theme = useTheme() const options: ApexOptions = { chart: { parentHeightOffset: 0, toolbar: { show: false } }, tooltip: { enabled: false }, grid: { strokeDashArray: 6, borderColor: theme.palette.divider, xaxis: { lines: { show: true } }, yaxis: { lines: { show: false } }, padding: { top: -15, left: -7, right: 7, bottom: -15 } }, stroke: { width: 3 }, colors: [hexToRGBA(theme.palette.info.main, 1)], markers: { size: 6, offsetY: 2, offsetX: -1, strokeWidth: 3, colors: ['transparent'], strokeColors: 'transparent', discrete: [ { size: 6, seriesIndex: 0, strokeColor: theme.palette.info.main, fillColor: theme.palette.background.paper, dataPointIndex: series[0].data.length - 1 } ], hover: { size: 7 } }, xaxis: { labels: { show: false }, axisTicks: { show: false }, axisBorder: { show: false } }, yaxis: { labels: { show: false } } } return ( $38.5k +62% Sessions ) } export default AnalyticsSessions