Tooltip not visible With treemap, but visible with other chart types

[rohitcoder]

Below, is my rendered treemap, i am trying to figure out why tooltip is not visible for me, i tried a lot, tooltip is visible for other chart types on same page, but not visible for treemap. I'm using react-apexcharts: 1.4.0 and apexcharts-clevision: 3.28.5

This is component code

// ** React Imports
import { ReactNode } from 'react'

// ** MUI Imports
import Box from '@mui/material/Box'
import Card from '@mui/material/Card'
import Button from '@mui/material/Button'
import Typography from '@mui/material/Typography'
import CardHeader from '@mui/material/CardHeader'
import CardContent from '@mui/material/CardContent'
import Grid, { GridProps } from '@mui/material/Grid'
import { styled, useTheme } from '@mui/material/styles'

// ** Icon Imports
import Icon from 'src/@core/components/icon'

// ** Third Party Imports
import { ApexOptions } from 'apexcharts'

// ** Types
import { ThemeColor } from 'src/@core/layouts/types'

// ** Custom Components Imports
import CustomAvatar from 'src/@core/components/mui/avatar'
import OptionsMenu from 'src/@core/components/option-menu'
import ReactApexcharts from 'src/@core/components/react-apexcharts'
import { type } from 'os'

interface DataType {
  title: string
  icon: ReactNode
  subtitle: string
  avatarColor: ThemeColor
}

const data: DataType[] = [
  {
    title: '$48,568.20',
    avatarColor: 'success',
    subtitle: 'Total Profit',
    icon: <Icon icon='mdi:trending-up' fontSize='1.875rem' />
  },
  {
    title: '$38,453.25',
    avatarColor: 'primary',
    subtitle: 'Total Income',
    icon: <Icon icon='mdi:currency-usd' fontSize='1.875rem' />
  },
  {
    title: '$2,453.45',
    avatarColor: 'secondary',
    subtitle: 'Total Expense',
    icon: <Icon icon='mdi:poll' />
  }
]

// Styled Grid component
const StyledGrid = styled(Grid)<GridProps>(({ theme }) => ({
  [theme.breakpoints.down('sm')]: {
    borderBottom: `1px solid ${theme.palette.divider}`
  },
  [theme.breakpoints.up('sm')]: {
    borderRight: `1px solid ${theme.palette.divider}`
  }
}))

interface props {
  title: string,
  chart_series: any,
}

const EcommerceTransactions = (props: props) => {
  const { title, chart_series } = props
  // ** Hook
  const theme = useTheme()
  const options: ApexOptions = {
    chart: {
      toolbar: { show: false },
    },
    colors: [theme.palette.primary.main],
    tooltip: { 
      enabled: true,
      shared: true,
      y: {
        formatter: function (val) {
          return "$" + val + "K"
        }
      },
      x: {
        formatter: function (val) {
          return "Week " + val
        }
      },
    },
  }

  return (
    <Card>
      <Grid container>
        <StyledGrid item xs={12} sm={12}>
          <CardContent sx={{ height: '100%', '& .apexcharts-xcrosshairs.apexcharts-active': { opacity: 0 } }}>
            <Typography variant='h6'>{title}</Typography>
            <ReactApexcharts type="treemap" height={320} series={chart_series} options={options} />
          </CardContent>
        </StyledGrid>
      </Grid>
    </Card>
  )
}

export default EcommerceTransactions

And i'm rendering it with below code snippet

<EcommerceTransactions 
          title={'States'}
          chart_series={
            [
              {
                data: [
                  {
                    x: 'New Delhi',
                    y: 218,
                  },
                  {
                    x: 'Kolkata',
                    y: 149
                  },
                  {
                    x: 'Mumbai',
                    y: 184
                  },
                  {
                    x: 'Ahmedabad',
                    y: 55
                  },
                  {
                    x: 'Bangaluru',
                    y: 84
                  },
                  {
                    x: 'Pune',
                    y: 31
                  },
                  {
                    x: 'Chennai',
                    y: 70
                  },
                  {
                    x: 'Jaipur',
                    y: 30
                  },
                  {
                    x: 'Surat',
                    y: 44
                  },
                  {
                    x: 'Hyderabad',
                    y: 68
                  },
                  {
                    x: 'Lucknow',
                    y: 28
                  },
                  {
                    x: 'Indore',
                    y: 19
                  },
                  {
                    x: 'Kanpur',
                    y: 29
                  }
                ]
              }
            ]
          } 
        />

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.