[charts] How to add area to LineChart in a compostion chart

[jdferreira-biai]

The problem in depth

Greetings MUI-X theme.

Consider this chart using composition, working example here: https://stackblitz.com/edit/q2tf38?file=Demo.js

The chart consist in a line chart, bar chart and scatter plot. Btw, I have to use the numeric representation of dates (using date.getTime()) to make it work with ScatterPlot series type requirements.

I want to connect the LineChart line with the axis and also add a colored area under the line. I tried many things but I cannot make it work.

Expected drawn visual result:

Please, I gently ask for your assistance. 🙏🏻

Your environment

`npx @mui/envinfo`

  System:
    OS: Linux 5.15 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
  Binaries:
    Node: 21.7.3 - ~/.nvm/versions/node/v21.7.3/bin/node
    npm: 10.5.0 - ~/.nvm/versions/node/v21.7.3/bin/npm
    pnpm: 9.7.1 - ~/.nvm/versions/node/v21.7.3/bin/pnpm
  Browser:
    Edge v130.0.2849.46 (Official build) (64-bit)
  npmPackages:
    @emotion/react: ^11.13.3 => 11.13.3 
    @emotion/styled: ^11.13.0 => 11.13.0 
    @mui/base: 5.0.0-beta.40 => 5.0.0-beta.40 
    @mui/material: ^5.16.7 => 5.16.7 
    @mui/x-charts: ^7.21.0 => 7.21.0 
    @mui/x-data-grid: ^7.21.0 => 7.21.0 
    @mui/x-data-grid-premium: ^7.21.0 => 7.21.0 
    @mui/x-date-pickers-pro: ^7.21.0 => 7.21.0 
    @mui/x-license: ^7.21.0 => 7.21.0 
    @types/react: ^18.3.4 => 18.3.4 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1 
    typescript: ^5.5.4 => 5.5.4

Search keywords: composition linechart area
Order ID: 88376

[alexfauquette]

Here is the closer I could get: https://stackblitz.com/edit/q2tf38-ulhmra?file=Demo.js,package.json

• For coloring the background you need to add <AreaPlot /> to render the area of your line series. Maybe you don't even want to display <LinePlot/>
• For the scatter chart, you could replace it by a line chart with <MarkPlot /> If you keep LinePlot you can hide this line with '.MuiLineElement-series-categoryBId': { display: 'none' }
• For extending the line before/after, I don't know. For me you're trying to display 2 bar charts on top of each over. For now we don't allow to have a modification of the bar size per series, but you can already play with it https://mui.com/x/react-charts/bars/#bar-size

[github-actions]

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