Issue: Unexpected transform Error in Nivo Line Chart on Resize

[dipanshu914]

Error Description:
I encountered this error while adjusting the screen size vertically using the browser's developer tools. When resizing, the Nivo Line Chart attempts to adjust dynamically, but it triggers an immediate flood of console errors. The error message appears as follows:

ERROR - chunk-NVAVGVLJ.js?v=40f4b096:6131 Error: attribute transform: Expected ')', "…811570467033e-18translate(, ), 2…".

It seems that when the chart is resizing, the elements inside the SVG are being assigned invalid transform attributes, likely due to an incorrect or incomplete translate() function. This issue occurs specifically when the chart's container is resized, possibly causing improper calculations for positioning elements inside the chart.

here is my code of line chart -

`
import { ResponsiveLine } from '@nivo/line'
import { useTheme } from '@mui/material'
import { tokens } from '../theme'
import { mockLineData as data } from '../data/mockData'

const LineChart = ({ isDashboard = false }) => {

const theme = useTheme()
const colors = tokens(theme.palette.mode)

return (
    <ResponsiveLine
        data={data}
        theme={{
            axis: {
                domain: {
                    line: {
                        stroke: colors.grey[100]
                    }
                },
                legend: {
                    text: {
                        fill: colors.grey[100],
                        fontSize: '14px'
                    }
                },
                ticks: {
                    line: {
                        stroke: colors.grey[100],
                        strokeWidth: 1
                    },
                    text: {
                        fill: colors.grey[100],
                        fontSize: '12px'
                    }
                },
            },
            legends: {
                text: {
                    fill: colors.grey[100],
                    fontSize: '14px'
                },
            },
            tooltip: {
                container: {
                    color: colors.primary[500]
                }
            },

        }}
        margin={{ top: 50, right: 110, bottom: 60, left: 80 }}
        xScale={{ type: 'point' }}
        curve="catmullRom"
        yScale={{
            type: 'linear',
            min: 'auto',
            max: 'auto',
            stacked: false,
            reverse: false
        }}
        axisTop={null}
        axisRight={null}
        axisBottom={{
            tickSize: 0,
            tickPadding: 7,
            tickRotation: 0,
            legend: isDashboard ? undefined : 'transportation',
            legendOffset: 46,
            legendPosition: 'middle',
            truncateTickAt: 0
        }}
        axisLeft={{
            tickValues: 5,
            tickSize: 5,
            tickPadding: 7,
            tickRotation: 0,
            legend: isDashboard ? undefined : 'count',
            legendOffset: -50,
            legendPosition: 'middle',
            truncateTickAt: 0
        }}
        colors={isDashboard ? { datum: "color" } : { scheme: "category10" }}
        lineWidth={3}
        pointColor={{ theme: 'background' }}
        pointBorderWidth={4}
        pointBorderColor={{ from: 'serieColor' }}
        pointLabel="data.yFormatted"
        pointLabelYOffset={-12}
        areaOpacity={0}
        enableGridX={false}
        enableGridY={false}
        enableTouchCrosshair={true}
        useMesh={true}
        legends={[
            {
                anchor: 'bottom-right',
                direction: 'column',
                justify: false,
                translateX: 100,
                translateY: 0,
                itemsSpacing: 0,
                itemDirection: 'left-to-right',
                itemWidth: 80,
                itemHeight: 20,
                itemOpacity: 0.75,
                symbolSize: 12,
                symbolShape: 'circle',
                symbolBorderColor: 'rgba(0, 0, 0, .5)',
                effects: [
                    {
                        on: 'hover',
                        style: {
                            itemBackground: 'rgba(0, 0, 0, .03)',
                            itemOpacity: 1
                        }
                    }
                ]
            }
        ]}
    />
)

}

export default LineChart

`

--

Project detail
-Using Chrome Browser -- Version 132.0.6834.160 (Official Build) (64-bit)

packages -

"@nivo/bar": "^0.88.0",
"@nivo/core": "^0.88.0",
"@nivo/geo": "^0.88.0",
"@nivo/line": "^0.88.0",
"@nivo/pie": "^0.88.0",

"react": "^18.3.1",
"react-dom": "^18.3.1",