The settings icon which was included at the start of the video is not appearing in the bottom right corner of the screen instead it's appearing in the top left corner of the screen.

I've used the exact code as shown in the video and as given in the GitHub repository. Kindly look at my code and suggest to me how I can sort this issue.

In the ContextProvider.js file, the colorMode and the themeMode are stored in the localStorage. However, if the user reloads the site those changes are lost due to the hardcoded default settings.

The backgroundImage defined in the tailwind.configs.js is rendering a plain white image. This is the background rendered with the 'bg-hero-pattern' className. Should be the colorful lady at a desk image that is shown in the tutorial.

backgroundImage: {
'hero-pattern':
"url('https://i.ibb.co/MkvLDfb/Rectangle-4389.png')",
},

I've imported the GoPrimitiveDot component from react-icons/go to use it as the tutorial said, but it seems it doesn't exist in the previous folder. I guess there's a problem in depandecies version or something like that.

export 'MultiSelect' (imported as 'MultiSelect') was not found in '@syncfusion/ej2-dropdowns'

export 'DropDownList' (imported as 'DropDownList') was not found in '@syncfusion/ej2-dropdowns' (module has no exports)

'TimePicker' (imported as 'TimePicker') was not found in '@syncfusion/ej2-calendars' (module has no exports)

etc...

I simply downloaded and installed it with peer deps.

TooltipComponent is not working for me:{

Any help, please.

When reloading on netlify it shows Page not found. This can be solved using redirects file in the public folder

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 (

    {/* Card Items Start Here */}
    <div className="flex m-3 flex-wrap justify-center">
      {earningData.map((item) =>(<div key={item.title} className="bg-white dark:text-gray-200 dark:bg-secondary-dark-bg md:w-56 p-4 pt-9 rounded-2xl">  
        <button type="button"
        style={{color: item.iconColor, backgroundColor: item.iconBg}} className='text-2xl opacity-0.9 rounded-full p-4 hover:drop-shadow-xl'>
          {item.icon}
        </button>
        <p className="mt-3">
          <span className='text-lg font-semibold'>
            {item.amount}
          </span>
          <span className={`text-sm text-${item.pcColor} ml-2`}>
            {item.percentage}
          </span>
        </p>
        <p className="text-sm text-gray-400 mt-1">{item.title}</p>
        </div>
      ))}
    </div>
  </div>
  {/* 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>

At 1:42, I am not getting that banner! Where should I import that?

this banner dont work for me no idea why

I try also downloand your files and just paste to my project and dont work also no idea why

It's the Financial Component here, I can't see the hilo line on the chart.
Is anyone can help please?

import {
	ChartComponent,
	SeriesCollectionDirective,
	SeriesDirective,
	HiloSeries,
	Tooltip,
	DateTime,
	Zoom,
	Logarithmic,
	Crosshair,
	Inject,
} from "@syncfusion/ej2-react-charts";
import {
	financialChartData,
	FinancialPrimaryXAxis,
	FinancialPrimaryYAxis,
} from "../../data/dummy";
import { useStateContext } from "../../contexts/ContextProvider";
import { ChartsHeader } from "../../components";

const date1 = new Date("2017, 1, 1");

function filterValue(value) {
	if (value.x >= date1) {
		return value.x, value.high, value.low;
	}
}
const returnValue = financialChartData.filter(filterValue);

const Financial = () => {
	const { currentMode } = useStateContext();
	return (
		<div className="m-4 md:m-10 mt-24 p-10 bg-white dark:bg-secondary-dark-bg rounded-3xl">
			<ChartsHeader category="Financial" title="AAPL Historical" />
			<div className="w-full">
				<ChartComponent
					id="charts"
					crosshair={{ enable: true, lineType: "Vertical", line: { width: 0 } }}
					primaryXAxis={FinancialPrimaryXAxis}
					primaryYAxis={FinancialPrimaryYAxis}
					chartArea={{ border: { width: 0 } }}
					background={currentMode === "Dark" ? "#33373E" : "#fff"}
					style={{ textAlign: "center" }}
					tooltip={{ enable: true, shared: true }}
				>
					<Inject
						services={[
							HiloSeries,
							Tooltip,
							DateTime,
							Zoom,
							Logarithmic,
							Crosshair,
						]}
					/>
					<SeriesCollectionDirective>
						<SeriesDirective
							datasource={returnValue}
							type="Hilo"
							xName="x"
							low="low"
							high="high"
							name="Apple Inc"
							yName="low"
						/>
					</SeriesCollectionDirective>
				</ChartComponent>
			</div>
		</div>
	);
};

export default Financial;

I'm having setup problems.

Kindly advice.

Thank you.

I have followed the steps in the video tutorial in this project to install syncfusion.

Now I have tried to implement the TooltipComponent and it gives me the following error:

"This application was built using a trial version of Syncfusion Essential Studio. Please include a valid license to permanently remove this license validation message. You can also obtain a free 30 day evaluation license to temporarily remove this message during the evaluation period. Please refer to this help topic for more information."

I've searched for the solution but I can't figure it out. I didn't know that syncfusion was paid. Will I have an alternative to use it for free?

I dont have the Sparkline line on the Ecommerce view, anyone knows why?

Appreciate the works so beautiful.

I just pulled the project without any changes ( I only did "npm install" after pull), unfortunatelly I cannot "npm run build" this project.

First error:

I tried to fix it by executing the instruction of the error.

Then I just get the error without any description or details why it 'failed to compile.'..

How to fix this ^?

When I scroll the screen the grid on the page does not go under the sidebar, rather slides on top of the sidebar. please have a look in the screenshot.

https://github.com/TheSwordBreaker/cool-react-dashboard

I've tried multiple of things to make it work, but seems like tailwind isn't connecting to my project. Any fixes ?

Hey there!
Looks like some styles code is missing for count of unreaded messages - https://prnt.sc/B1L-hCFJB0AK
I think it can be fixed in tailwind.config.js

I used **Last Version SparkLine code ** and i faced this issue :
Cannot read properties of undefined (reading 'x')
Anyone Helps me !!
check the image :
(https://user-images.githubusercontent.com/68381041/202911170-375f387b-3d7b-4adf-a9e6-fc64fb4729da.png)