Basic Column Chart Breaks Page in Next js With 9847 data point

[mr-burhanuddin]

Hi !

We Are Using react-apex charts and we have alot of data to plot
previously it was working good but now the bar chart is behaving a bit strange

this is my setting for chart:
` const [state, setState] = useState({
series: [],
options: {
chart: {
type: 'bar',
toolbar: {
show: true
},
zoom: {
enabled: true
},
animations: {
enabled: false
}
},
markers: {
size: 0
},
colors: [
'#DDA53F',
'#C17EA5',
'#5AA586',
'#73B6E5',
'#1B262C',
'#0F4C75',
'#3282B8',
'#00ADB5',
'#041C32',
'#04293A',
'#064663',
'#ECB365',
'#161616',
'#346751',
'#C84B31',
'#2D2424',
'#5C3D2E',
'#B85C38'
],

  plotOptions: {
    bar: {
      columnWidth: '10%',
      endingShape: 'rounded'
    }
  },
  dataLabels: {
    enabled: false
  },
  stroke: {
    show: true,
    width: 0.5,
    colors: ['transparent']
  },
  xaxis: {
    title: {
      text: TimeRange,
      formatter: undefined
    },
    categories: []
  },
  yaxis: [
    {
      title: {
        text: YAxisChartName,
        formatter: undefined
      }
    }
  ]
}

});`

now when i pass the data it goes white screen and page breaks with 9847 points