Sparkline

[ZettaDevs]

I've followed the tutorial as closely as possible, however, the Sparkline still won't show. I've logged the data, its clearly being passed into the Sparkline component, but the chart just won't show. Any ideas?

My SparkLine.js file currently looks like this (Without console logs)

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

const SparkLine = ({id, height, width, color, data, type, currentColor}) => {
  return (
    <SparklineComponent 
    id={id}
    height={height}
    width={width}
    lineWidth={1}
    valueType="Numeric"
    fill={color}
    border={{ color: currentColor, width: 2 }}
    dataSource={data}
    xName="x"
    yName="y"
    type={type}
    >
      <Inject services={[SparklineTooltip]} />
    </SparklineComponent>
  )
}

export default SparkLine

and my Ecommerce.jsx currently looks like this:

`import React from 'react' import { BsCurrencyDollar } from 'react-icons/bs'; import {GoDotFill} from 'react-icons/go';

import {Stacked, Pie, Button, SparkLine} from '../components'; import {earningData, SparklineAreaData, ecomPieChartData} from '../data/dummy'; import { useStateContext } from '../contexts/ContextProvider';

const Ecommerce = () => { return (

Earnings

$70,899.67

{/* Card Items Start Here */}

{earningData.map((item) =>(

{item.icon}

{item.amount} {item.percentage}

{item.title}

))}

  {/* Card Items End Here */}

  {/* Revenue Updates Start Here */}
  <div className="flex gap-10 flex-wrap justify-center">
    <div className="bg-white dark:text-gray-200 dark:bg-secondary-dark-bg  m-3 p-4 rounded-2xl md:w-780">
      <div className="flex justify-between">
          <p className="font-semibold text-xl">Revenue Updates</p>
          <div className="flex items-center gap-4">
            <p className="flex items-center gap-2 text-gray-600 hover:drop-shadow-xl">
              <span><GoDotFill /></span>
              <span>Expense</span>
            </p>
            <p className="flex items-center gap-2 text-green-400 hover:drop-shadow-xl">
              <span><GoDotFill /></span>
              <span>Budget</span>
            </p>
          </div>
        </div>

        <div className="mt-10 flex gap-10 flex-wrap justify-center">
          <div className="border-r-1 border-color m-4 pr-10">
            <div>
              <p>
                <span className="text-3xl font-semibold">$95,672</span>
                <span className='p-1.5 hover:drop-shadow-xl cursor-pointer rounded-full text-white bg-green-400 ml-3 text-xs'>25%</span>
              </p>
              <p className="text-gray-500 mt-1">Budget</p>
            </div>
            <div className="mt-8">
              <p>
                <span className="text-3xl font-semibold">$45,349</span>

              </p>
              <p className="text-gray-500 mt-1">Expense</p>
            </div>

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

          </div>

        </div>

      </div>          
  </div>
</div>

) }

export default Ecommerce`

[mateuszzbaraski]

Hi there, I encountered the same issue. Turns out in the dummy dataset the SparklineAreaData has column labels 'x' and 'yval' instead of 'y'. In the SparkLine.jsx replace it with

  xName="x"
  yName="yval"

Or change the dummy data naming