[charts] Add a line band plotting

[Audumbar-Patil]

Steps to reproduce

Link to live example: (required)

Steps:

1. Use LineChart React component.
2. Put data in three series
3. run the code

This is the code example taken from MUI X Chart official website -

import * as React from 'react';
import { LineChart } from '@mui/x-charts/LineChart';

const years = [
  new Date(1990, 0, 1),
  new Date(1991, 0, 1),
  new Date(1992, 0, 1),
  new Date(1993, 0, 1),
  new Date(1994, 0, 1),
  new Date(1995, 0, 1),
  new Date(1996, 0, 1),
  new Date(1997, 0, 1),
  new Date(1998, 0, 1),
  new Date(1999, 0, 1),
  new Date(2000, 0, 1),
  new Date(2001, 0, 1),
  new Date(2002, 0, 1),
  new Date(2003, 0, 1),
  new Date(2004, 0, 1),
  new Date(2005, 0, 1),
  new Date(2006, 0, 1),
  new Date(2007, 0, 1),
  new Date(2008, 0, 1),
  new Date(2009, 0, 1),
  new Date(2010, 0, 1),
  new Date(2011, 0, 1),
  new Date(2012, 0, 1),
  new Date(2013, 0, 1),
  new Date(2014, 0, 1),
  new Date(2015, 0, 1),
  new Date(2016, 0, 1),
  new Date(2017, 0, 1),
  new Date(2018, 0, 1),
];

const FranceGDPperCapita = [
  28129, 28294.264, 28619.805, 28336.16, 28907.977, 29418.863, 29736.645, 30341.807,
  31323.078, 32284.611, 33409.68, 33920.098, 34152.773, 34292.03, 35093.824,
  35495.465, 36166.16, 36845.684, 36761.793, 35534.926, 36086.727, 36691, 36571,
  36632, 36527, 36827, 37124, 37895, 38515.918,
];

const UKGDPperCapita = [
  26189, 25792.014, 25790.186, 26349.342, 27277.543, 27861.215, 28472.248, 29259.764,
  30077.385, 30932.537, 31946.037, 32660.441, 33271.3, 34232.426, 34865.78,
  35623.625, 36214.07, 36816.676, 36264.79, 34402.36, 34754.473, 34971, 35185, 35618,
  36436, 36941, 37334, 37782.83, 38058.086,
];

const GermanyGDPperCapita = [
  25391, 26769.96, 27385.055, 27250.701, 28140.057, 28868.945, 29349.982, 30186.945,
  31129.584, 32087.604, 33367.285, 34260.29, 34590.93, 34716.44, 35528.715,
  36205.574, 38014.137, 39752.207, 40715.434, 38962.938, 41109.582, 43189, 43320,
  43413, 43922, 44293, 44689, 45619.785, 46177.617,
];

export default function StackedAreas() {
  return (
    <LineChart
      xAxis={[
        {
          id: 'Years',
          data: years,
          scaleType: 'time',
          valueFormatter: (date) => date.getFullYear().toString(),
        },
      ]}
      series={[
        {
          id: 'France',
          label: 'French GDP per capita',
          data: FranceGDPperCapita,
          stack: 'total',
          area: true,
          showMark: false,
        },
        {
          id: 'Germany',
          label: 'German GDP per capita',
          data: GermanyGDPperCapita,
          stack: 'total',
          area: true,
          showMark: false,
        },
        {
          id: 'United Kingdom',
          label: 'UK GDP per capita',
          data: UKGDPperCapita,
          stack: 'total',
          area: true,
          showMark: false,
        },
      ]}
      width={600}
      height={400}
      margin={{ left: 70 }}
    />
  );
}

Current behavior

In the example above we can see that the output shows a three series graph with stacking. But the values of the data points doesn't match the values on Y -axis. The value for UK GDP (purple) on the first data point is 26,189 but on the graph on Y-axis it is showing 80,000

Expected behavior

The data points should align with Y -axis values.

Context

No response

Your environment

npx @mui/envinfo

``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```

Search keywords: y axis

[alexfauquette]

That's not a bug, it's the expected behavior of staked charts. Values are staked on top of each over, and the tooltip show individual values

• French GPD: 28k
• German GDP: 25k but on top of the French one so 25+28=53k
• United Kingdom GDP: 26k but on top of French and German ones so 25+28+26=79k

Small tips: GitHub has a syntax to quote code that make it much easier to read. And if it's a docs example, you can just copy the link to the docs section :) https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#quoting-code

[github-actions[bot]]

:warning: 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.

@Audumbar-Patil: 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.

[Audumbar-Patil]

Now this is my graph and i want to use three series in it (three lines). Why is the data point not pointing towards the correct value on Y axis. Please is there any other way where i can contact you. Regards

[alexfauquette]

That's a different topic. Here you are hacking the stacking to plot an area.

To make it work, you should trick the values in the maxEnvBmeTemp to subtract the minEnv value. Such that the stacking match what you're expecting.

Then you would have to either diable the tooltip display for those min/max values, or create a customized tooltip that do the opposite operation

Please is there any other way where i can contact you.

What's wrong with GitHub?

[alexfauquette]

We have two potential solution:

1. Add a confidence interval to line series with arrays for min/max
2. Add a new series type named 'band' that would have minData/maxData to plot interfals