Sparkline chart in NextJS does not render anything

Question

I tried to replicate the example shown at Syncfusion but the Sparkline chart isn't rendered at all, neither shows any error. I'm doing it with NextJS.

import { SparklineComponent, Inject, SparklineTooltip } from '@syncfusion/ej2-react-charts'
import { useEffect, useState } from 'react'

function MySparkline () {
  const [domLoaded, setDomLoaded] = useState(false)

  useEffect(() => {
    setDomLoaded(true)
  }, [])

  return (
    <>
      {domLoaded &&
    <SparklineComponent
      id='sparkline'
      height='100px'
      width='70%'
     dataSource={[
       { x: 0, xval: '2005', yval: 20090440 },
       { x: 1, xval: '2006', yval: 20264080 },
       { x: 2, xval: '2007', yval: 20434180 },
       { x: 3, xval: '2008', yval: 21007310 },
       { x: 4, xval: '2009', yval: 21262640 },
       { x: 5, xval: '2010', yval: 21515750 },
       { x: 6, xval: '2011', yval: 21766710 },
       { x: 7, xval: '2012', yval: 22015580 },
       { x: 8, xval: '2013', yval: 22262500 },
       { x: 9, xval: '2014', yval: 22507620 }
     ]}
      xName='xval'
      yName='yval'
      type='Area'
      >
      <Inject services={[SparklineTooltip]}/>
    </SparklineComponent>
    }
    </>
  )
}

export default MySparkline

In my page I call it like this

<MySparkline />

Any help would be very appreciated. Thanks

Answer 1

I have prepared the sample in NextJS with sparkline chart. Control is rendered fine without any exception. Please check with the below sample and screenshot.

Screenshot :

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sparkline-1298560420.zip