[charts] Error which showing the data on bar graph chart

[onkartme]

The problem in depth

Trying to show the following array of data on the bar graph chart

[
    {
        "label": "00:00",
        "value": 0.15
    },
    {
        "label": "00:30",
        "value": 0.24
    },
    {
        "label": "01:00",
        "value": 0.3
    }
]

in the following component:

<BarChart
  series={[
    {
      data: chartData,
      label: 'Usage',
      dataKey: 'value',
    }
  ]}
  xAxis={[{ dataKey: 'label', scaleType: 'band', label: 'Time' }]}
  yAxis={[{ dataKey: 'value', label: 'Usage' }]}
/>

However, getting following error.

Your environment

@mui/envinfo@2.0.19

System: OS: macOS 14.5 Binaries: Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm pnpm: Not Found Browsers: Chrome: 126.0.6478.127 Edge: 126.0.2592.87 Safari: 17.5 npmPackages: @emotion/react: ^11.11.4 => 11.11.4 @emotion/styled: ^11.11.5 => 11.11.5 @mui/base: 5.0.0-beta.40 @mui/core-downloads-tracker: 5.15.15 @mui/icons-material: ^5.15.15 => 5.15.15 @mui/material: ^5.15.15 => 5.15.15 @mui/private-theming: 5.15.14 @mui/styled-engine: 5.15.14 @mui/system: 5.15.15 @mui/types: 7.2.14 @mui/utils: 5.15.14 @mui/x-charts: ^7.9.0 => 7.9.0 @mui/x-date-pickers: 7.3.2 @mui/x-date-pickers-pro: ^7.3.2 => 7.3.2 @mui/x-license: ^7.2.0 => 7.2.0 @types/react: ^18.2.78 => 18.2.79 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^5 => 5.4.5

Search keywords: Bar graph chart Order ID: 88406

[michelengelen]

Hey @onkartme and sry for the late reply. If you have your data available in a series of objects you would need to use the dataSet prop. I your case this would look something like this

const dataSet = [
  {
    "label": "00:00",
    "value": 0.15
  },
  {
    "label": "00:30",
    "value": 0.24
  },
  {
    "label": "01:00",
    "value": 0.3
  }
]

...

<BarChart
    dataSet={dataSet}
    series={[
      {
        label: 'Usage',
        dataKey: 'value',
      }
    ]}
    xAxis={[{ dataKey: 'label', scaleType: 'band', label: 'Time' }]}
    yAxis={[{ dataKey: 'value', label: 'Usage' }]}
/>

Here is the respective section in the docs: Using a dataset

[github-actions[bot]]

The issue has been inactive for 7 days and has been automatically closed.