syncfusion SparklineComponent Render Nothing?

Question

Here is my code in my react application iam trying to use syncfusion with react.js when i try to add this sparkline chart to my app it renders nothing

import { SparklineComponent } from '@syncfusion/ej2-react-charts';
    
    
    <SparklineComponent
                  id="sparkline"
                  height={'100%'}
                  width={'100%'}
                  lineWidth={2}
                  valueType="Numeric"
                  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="X"
                  yName="Y"
                  type="Line"
                  fill={themeColor}
                  border={{ color: themeColor, width: 2 }}
                >
                  <Inject services={[SparklineTooltip]} />
                </SparklineComponent>

Answer 1

When we analyzed the provided code snippet, we came to know that you have not set the dataSource property to the xName and yName property in Sparkline. We have created a simple react application using the provided code snippet. Please find the below stackblitz link for your sample reference.

Sample link: https://stackblitz.com/edit/react-xwunvw?file=index.js

Code Snippet:

<SparklineComponent xName="xval" yName="yval"></SparklineComponent>