[question][BarChart] How can I fix the BarChart tooltip on top of the bar?

[murtinha]

The problem in depth

So Im using BarChart component and I need to have the tooltip fixed at the top of the bar when I hover over the axis instead of its position getting changed depending on my mouse. I also need the tooltip not to disappear when hovering over it and not the axis because I am gonna have a clickable text inside it.

I am also overriding the default axisContent tooltip body

Here is my BarChart component

<BarChart
        width={isMobile ? 750 : undefined}
        ref={barRef}
        onAxisClick={handleOnAxisClick}
        sx={{
          ...(isMobile && { '&&': { touchAction: 'pan-x' } }),
          '& .MuiChartsAxis-tick': {
            display: 'none',
          },
          '& .MuiChartsAxis-right': {
            '& .MuiChartsAxis-tickContainer': {
              display: 'none',
            },
          },
          '& .MuiChartsAxis-tickLabel': {
            color: theme.palette.custom.shadeDark,
            fontSize: '10px !important',
          },
          '.MuiChartsGrid-verticalLine': {
            display: 'none',
          },

          '.MuiChartsGrid-verticalLine:nth-of-type(4), .MuiChartsGrid-verticalLine:nth-of-type(7), .MuiChartsGrid-verticalLine:nth-of-type(10)':
            {
              display: 'block',
            },
          [`& .${chartsGridClasses.line}, & .MuiChartsAxis-line`]: {
            strokeDasharray: '2 2',
            stroke: `${theme.palette.custom.shadeMidLight} !important`,
            strokeWidth: 1,
          },
        }}
        grid={{ horizontal: true, vertical: true }}
        xAxis={[
          {
            scaleType: 'band',
            dataKey: 'formattedDate',
          },
        ]}
        yAxis={[
          {
            valueFormatter: (value: number) => formatRevenue(value.toString()),
          },
        ]}
        slotProps={{
          legend: {
            hidden: true,
          },
          popper: {
            placement: 'right',
          },
        }}
        rightAxis={{}}
        series={[
          {
            dataKey: 'payment',
            label: 'Net revenue',
          },
        ]}
        dataset={graphData.map(v => ({
          formattedDate: v.formattedDate,
          payment: v.payment,
        }))}
        colors={[theme.palette.primary.main]}
        height={300}
        slots={{
          axisContent: (props: ChartsAxisContentProps) => (
            <NetRevenueGraphTooltipBody
              index={props?.dataIndex}
              graphData={graphData}
            />
          ),
        }}
        tooltip={{
          trigger: 'axis',
        }}
        margin={{
          left: 80,
        }}
      />

Your environment

`npx @mui/envinfo`

Using Chrome

  System:
    OS: macOS 14.1.2
  Binaries:
    Node: 18.17.1 - ~/.nvm/versions/node/v18.17.1/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v18.17.1/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 127.0.6533.120
    Edge: Not Found
    Safari: 17.1.2
  npmPackages:
    @emotion/react:  11.10.6
    @emotion/styled:  11.10.6
    @mui/base:  5.0.0-alpha.123
    @mui/core-downloads-tracker:  5.11.15
    @mui/icons-material:  5.11.11
    @mui/lab:  5.0.0-alpha.136
    @mui/material:  5.11.15
    @mui/private-theming:  5.13.7
    @mui/styled-engine:  5.13.2
    @mui/system:  5.14.0
    @mui/types:  7.2.14
    @mui/utils:  5.15.20
    @mui/x-charts-vendor:  7.12.1
    @mui/x-data-grid:  6.20.1
    @mui/x-data-grid-pro:  6.20.1
    @mui/x-date-pickers:  6.20.1
    @mui/x-license:  7.7.0
    @mui/x-license-pro:  6.10.2
    @types/react:  18.2.21
    react:  18.2.0
    react-dom:  18.2.0
    typescript:  4.9.5

Search keywords: barchart tooltip
Order ID: 74069

[alexfauquette]

This customization aspect needs some improvement. Does the solution in #11484 (the example in the issue description ) solves your issue? It fixes the tooltip at the bottom but same can be done to the top I assume

[murtinha]

I have tried that solution @alexfauquette but it doesnt seem to change anything... the tooltip change its placement but its still anchored to my mouse position and movement. I have tried some different placements

slotProps={{
    popper: {
     placement: "auto-start" 
  }
}}

I ended up migrating to recharts :/

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

We value your feedback @murtinha! How was your experience with our support team?
If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!