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`