Material-UI chart only loading lines after hovering

Question

I'm trying to use a Material UI Line chart to display some data on my NextJS 14 application. The data is displayed just fine, but the chart only renders the lines when I hover on it, instead of instantly when the page loads. The axis mount correctly, but none of the lines appear until the mouse hover.

Here's how i'm loading the chart:

'use client';
import { LineChart } from '@mui/x-charts'
import React from 'react'

const Chart = () => {
  return (
    <div className='w-full h-full'>
        <LineChart
            xAxis={[{ data: [1, 2, 3, 5, 8, 10] }]}
            series={[
                {
                data: [2, 5.5, 2, 8.5, 1.5, 5],
                color: '#245BFF',
                },
            ]}
            disableAxisListener={true}
        />
    </div>
  )
}

export default Chart;

I've tried looking through the docs to see if I was missing a property, but found nothing.

I also made sure to add: ['@mui/x-charts'] to your next.config.js as specified by the MUI setup documentation

If anybody could lend me a hand I'd really apreciate it!

Answer 1

It's an issue only while development. In the production environment I didn't faces any issue.

I don't know the exact reason, but it's 'clippath', that is not updating. It's not taking full width, but on hover it takes the full width.