[charts][BarChart] position the bar labels above the bars using BarPlot

[Meganathan-MX]

Current behavior

By default, the labels are positioned like this:

After using the BarPlot, it looks like this (see video attached):

Screen.Recording.2024-11-28.at.11.48.04.PM.mov

Expected behavior

I want the final output to look like this, with a faded effect (the faded effect is missing in this image):

Context

I'm using BarChart, and I'm trying to render the bar labels above the bars. By default, the labels are positioned at the center of the bars. To move the labels above the bars, I attempted to use the slots property in the BarPlot component, but it didn't work as expected.

Specifically, when I use the slots property at the initial render, the height of the bars is set to 0. However, when I move my mouse over the chart, the labels update and appear as expected.

What I'm looking for:
I need a solution to ensure that the bar labels are consistently placed above the bars, without the height issue at initial render. Is there any other workaround besides using BarPlot?

Code

import { BarPlot, ChartsReferenceLine, ChartsXAxis, ResponsiveChartContainer } from '@mui/x-charts'

export const BarChart = () => {
  return (
    <>
      <ResponsiveChartContainer
        height={300}
        highlightedItem={{
          dataIndex: 3,
          seriesId: 'auto-generated-id-0',
        }}
        series={[
          {
            color: '#CD5F84',
            data: [10, 10, 10, 100],
            highlightScope: {
              fade: 'global',
            },
            type: 'bar',
          },
        ]}
        skipAnimation
        sx={{
          '.MuiBarLabel-root': {
            fill: '#49505A',
            fontSize: 13
          },
        }}
        width={500}
        xAxis={[
          {
            data: ['Aug', 'Sep', 'Oct', 'Nov'],
            scaleType: 'band',
          },
        ]}
      >
        <ChartsReferenceLine
          lineStyle={{
            stroke: '#A8B1BD',
            strokeDasharray: '0.1 5.9',
            strokeLinecap: 'round',
            strokeWidth: 2,
          }}
          y={10}
        />
        <ChartsXAxis
          disableTicks
          position="bottom"
          sx={{
            '.MuiChartsAxis-line': {
              stroke: '#6A7381',
            },
          }}
          tickLabelStyle={{
            color: '#6A7381',
            fontSize: 11,
            fontWeight: 400,
          }}
        />
        <BarPlot
          // barLabel={({ value }) => `$${value}`}
          // borderRadius={2}
          // skipAnimation
          slots={{
            bar: (props) => {
              return (
                <g>
                  <rect
                    y={props?.style?.y.get()}
                    x={props?.style?.x.get()}
                    height={props?.style?.height.get()}
                    width={props?.style?.width.get()}
                    fill={props.ownerState.color}
                    rx={2}
                    ry={2}
                  />
                  <text
                    x={props?.style?.x.get() + props?.style?.width.get() / 2}
                    y={props?.style?.y.get() - 5}
                    textAnchor="middle"
                    fill="black"
                    fontSize={11}
                    fontWeight={400}
                  >
                    $10
                  </text>
                </g>
              )
            },
          }}
        />
      </ResponsiveChartContainer>
    </>
  )
}

Your environment

npx @mui/envinfo

  System:
    OS: macOS 14.7.1
  Binaries:
    Node: 20.16.0 - ~/.nvm/versions/node/v20.16.0/bin/node
    npm: 10.8.1 - ~/.nvm/versions/node/v20.16.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 131.0.6778.86
    Edge: Not Found
    Safari: 18.1.1
  npmPackages:
    @emotion/react: ^11.13.5 => 11.13.5 
    @emotion/styled: ^11.13.5 => 11.13.5 
    @mui/base: 5.0.0-beta.61 => 5.0.0-beta.61 
    @mui/core-downloads-tracker:  5.16.7 
    @mui/icons-material: ^5.16.7 => 5.16.7 
    @mui/material: ^5.16.7 => 5.16.7 
    @mui/private-theming:  5.16.6 
    @mui/styled-engine:  5.16.6 
    @mui/system: ^5.16.7 => 5.16.7 
    @mui/types:  7.2.19 
    @mui/utils:  6.1.6 
    @mui/x-charts: ^7.22.3 => 7.22.3 
    @mui/x-charts-vendor:  7.20.0 
    @mui/x-data-grid:  7.22.2 
    @mui/x-data-grid-pro: ^7.21.0 => 7.22.2 
    @mui/x-date-pickers: ^7.21.0 => 7.22.2 
    @mui/x-date-pickers-pro: ^7.21.0 => 7.22.2 
    @mui/x-internals:  7.21.0 
    @mui/x-license:  7.21.0 
    @mui/x-license-pro: ^6.10.2 => 6.10.2 
    @types/react: ^18.3.11 => 18.3.12 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1 
    typescript: ^5.6.2 => 5.6.3 

Search keywords: BarChart, BarPlot

[Meganathan-MX]

With the help of this, I am now able to achieve the expected scenario

[michelengelen]

Thanks for letting us know @Meganathan-MX ... I'll close this issue then! 👍🏼

[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

@Meganathan-MX How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.