[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[bot]]

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!