[charts][LineChart] unwanted horizontal line when rendering 100 data points

[szszoke]

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/little-water-qygylh

Steps:

1. Wait until the live example loads
2. Observe

Current behavior

An extra horizontal line is rendered. See screenshot below.

Expected behavior

No extra horizontal line is rendered.

Context

I am trying to render 100 data points. When I get up to 97, I get an extra horizontal line. It doesn't seem to matter what data points are rendered as long as there are at least 97.

Tested in latest Chrome and Firefox and got the same result.

Your environment

Tested with the browsers below:

• Chromium 125.0.6422.112
• Firefox 126.0

npx @mui/envinfo

 System:
    OS: Linux 6.9 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
  Binaries:
    Node: 20.2.0 - /usr/local/bin/node
    npm: 9.9.3 - /usr/local/share/npm-global/bin/npm
    pnpm: 8.6.1 - /usr/local/share/npm-global/bin/pnpm
  Browsers:
    Chrome: Not Found
  npmPackages:
    @emotion/react:  11.11.4 
    @emotion/styled:  11.11.5 
    @mui/base:  5.0.0-beta.40 
    @mui/core-downloads-tracker:  5.15.18 
    @mui/icons-material:  5.15.18 
    @mui/material:  5.15.18 
    @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.5.1 
    @mui/x-data-grid:  7.5.0 
    @mui/x-date-pickers:  7.5.0 
    @types/react:  18.3.2 
    react:  18.3.1 
    react-dom:  18.3.1 
    typescript: ^5.4.5 => 5.4.5 

Search keywords: line charts horizontal line

[michelengelen]

Hey @szszoke I can confirm the bug and will add this to the board for the team to have a look!
Thanks for taking the time to open an issue here 🙇🏼

[alexfauquette]

The issue is not about going from 97 to 100 points. It's because after 19:30 you get x="20:00" which is already defined. So the point scale will put it at the first instance. That's why you have multiple point at the beginning of your chart.

A solution could be to use Data object and format its value

https://codesandbox.io/p/sandbox/eager-thompson-jnd8ft?file=%2Fsrc%2FDemo.tsx%3A217%2C20

[szszoke]

Making sure to not pass in duplicate values for the x axis solved the issue.

I was under the assumption that it is only the index that ties data points together.

[alexfauquette]

I already cot triked by this issue. Could worth a warinig in the docs, but I don't know where to put it

[JCQuintas]

@alexfauquette we could maybe warn of duplicate data in development mode? Might not be very performant though 🤔

[alexfauquette]

I got a quick look, but I don't see a place in the codebase where we could do this check without looping over the data.

Btw for later reader finding this issue, if you really need multiple points with the same value, the solution is to use an array of index for the axis data an override it with the correct labels.

const dayFirstLetter = ['M', 'T', 'W', 'T', 'F', 'S', 'S']
const getDayFirstLetter = (v: number) => dayFirstLetter[v]

// ...

{ 
  scaleType: 'point',
  data: [0, 1, 2, 3, 4, 5, 6],
  valueFormatter: getDayFirstLetter
}

[szszoke]

the solution is to use an array of index for the axis data an override it with the correct labels

That is exactly what I ended up doing.

[JCQuintas]

We are going to test adding a duplicate check and see how it affects development performance. Then decide on adding it or not.