ej2 Syncfusion Sparkline component displays nothing

Question

Calling Component

 <SparkLine currentColor={"blue"} id="line-sparkline" type="Line" height="80px" width="250px" data={SparklineAreaData} color={"blue"} />

actuall Component

import React from 'react'
import {SparklineComponent,Inject,SparklineTooltip} from '@syncfusion/ej2-react-charts'
import {SparklineAreaData} from '../../data/dummy'
const SparkLine = ({id,height,width,color,data,type,currentColor}) => {


  return (
        
        <SparklineComponent
        id={"line-sparkline"}
        height={"80px"}
        width={"250px"}
        lineWidth={1}
        valueType="Numeric"
        fill={"blue"}
        border={{ color:"blue", width: 2 }}
        dataSource={SparklineAreaData}
        xName='x'
        yName='y'
        type={"Line"}
        >
          <Inject services={[SparklineTooltip]} />
        </SparklineComponent>
        
        
  )
}

export default SparkLine

Learning About syncfusion creating a simple Sparkline chart but it displays nothing on front-end to error also but when i inspect there is actually some elements tag but it shows nothing

score 1 · Answer 1 · answered Jul 18 '22 at 05:49

This problem is arise due to wrong formatting of data. Your x-axes variable name and y-axes variable name must be same as props xName and yName. If your dummy data look like this:

const dummyData = [{
  { xval: 1, yval: 6 },
  { xval: 2, yval: 7 },
  { xval: 3, yval: 4 },
  { xval: 4, yval: 8 },
  { xval: 5, yval: 10 },
}]

Props xName="xval" and yName="yval"

see Full example https://ej2.syncfusion.com/react/documentation/sparkline/getting-started/

score 0 · Answer 2 · answered Jul 11 '22 at 16:31

0

I also experienced this problem. You can fix this by looking at the syncfusion documentation. Correct the following.

change
xName='x' to xName = 'xval'

change

yName='y' to yName = 'yval'

Now it should work fine.

answered Jul 11 '22 at 16:31

Kayode Awe

1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 13 '22 at 12:36

score 0 · Answer 3 · answered Nov 10 '22 at 11:34

The value of your xName and yName props must be the same as your data Object property name For example

if your data object is

const dummyData = [{
    { xvalue: 1, yvalue: 6 },
    { xvalue: 2, yvalue: 7 },
    { xvalue: 3, yvalue: 4 },
    { xvalue: 4, yvalue: 8 },
    { xvalue: 5, yvalue: 10 },
  }]

the xName and yName props value will be

    xName='xvalue'
    yName='yvalue'

like this:

 <SparklineComponent
    id={"line-sparkline"}
    height={"80px"}
    width={"250px"}
    lineWidth={1}
    valueType="Numeric"
    fill={"blue"}
    border={{ color:"blue", width: 2 }}
    dataSource={SparklineAreaData}
    xName='xvalue'
    yName='yvalue'
    type={"Line"}
    >

ej2 Syncfusion Sparkline component displays nothing

3 Answers3