CODEWITHSUNDEEP
javascriptreactjs
Larissa Rahari
Larissa Rahari

Reputation: 11

Why does the sparkline does not appear?

I tried to show my sparkline but it doesn't show up, plus it blocks all the rest of my code.

Here is my component 

import React from "react";
import { SparklineComponent, Inject, SparklineTooltip } from "@syncfusion/ej2-react-charts";
const SparkLine =({id, height,width, data, color,type, currentColor}) =>{
    return(
        <SparklineComponent
            id={id}
            height={height}
            width={width}
            lineWidth={1}
            valueType="Numreric"
            fill={color}
            border={{color: currentColor, width:2}}
            dataSource={data}
            xName="x"
            yName="yval"
            type={type}
            tooltipSettings={{
                visible: true,
                format: '${x}: data ${y}',
                trackLineSettings:{
                    visible: true
                }
            }}
        >
            <Inject services={[SparklineTooltip]}/>
        </SparklineComponent>
    )
}
export default SparkLine;

I want to display my SparkLine in this Test component

import React from "react";
import {SparkeLine} from './components';
import {SparklineAreaData} from '../data/dummy';

const Test=()=>{
return(
  <div className="mt-5">
   <SparkLine 
    currentColor="blue" 
    id="line-sparkline" 
    type="Line" 
    height="80px" 
    width="250px" 
    data={SparklineAreaData} 
    color="blue"/>
  </div>
)

}

This is an excerpt from my dummy.js file where I put the values ​​for x and y. But it seems that when I export SparklineAreaData to data nothing is showing.

export const SparklineAreaData = [
  { x: 1, yval: 2 },
  { x: 2, yval: 6 },
  { x: 3, yval: 8 },
  { x: 4, yval: 5 },
  { x: 5, yval: 10 },

];

Upvotes: 0

Views: 419

Answers (1)

Aleks Marinič
Aleks Marinič

Reputation: 26

you made a mistake by the format of the tooltipSettings. I got the same issue by watching this tutorial. It's just a spelling mistake. The format shoud be: ${x} : data ${yval}, as you can see here:

import React from "react";
import { SparklineComponent, Inject, SparklineTooltip } from "@syncfusion/ej2-react-charts";
const SparkLine =({id, height,width, data, color,type, currentColor}) =>{
    return(
        <SparklineComponent
            id={id}
            height={height}
            width={width}
            lineWidth={1}
            valueType="Numreric"
            fill={color}
            border={{color: currentColor, width:2}}
            dataSource={data}
            xName="x"
            yName="yval"
            type={type}
            tooltipSettings={{
                visible: true,
                format: '${x} : data ${yval}',
                trackLineSettings:{
                    visible: true
                }
            }}
        >
            <Inject services={[SparklineTooltip]}/>
        </SparklineComponent>
    )
}
export default SparkLine;

I really hope it helped you as it helped me. Thx and good luck with the tutorial

Upvotes: 0

Related Questions