fix(igr-ts): revert charts logic and fix vite config

Author: Hristo313

packages/cli/templates/react/igr-ts/category-chart/default/files/src/app/__path__/__filePrefix__.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { IgrCategoryChartModule } from 'igniteui-react-charts';
 import { IgrCategoryChart } from 'igniteui-react-charts';
 import style from './style.module.css';
@@ -15,7 +15,11 @@ const data: any = [
 
 export default function $(ClassName)() {
   const title = 'Category Chart';
-  const [chartData] = useState(data);
+  const [chartData, setChartData] = useState([]);
+
+  useEffect(() => {
+    setChartData(data);
+  }, []);
 
   return (
     <div>

packages/cli/templates/react/igr-ts/doughnut-chart/default/files/src/app/__path__/__filePrefix__.tsx

@@ -23,18 +23,12 @@ const data: any = [
 
 export default function $(ClassName)() {
   const title = 'Doughnut Chart';
-  const [chartData] = useState(data);
+  const [chartData, setChartData] = useState([]);
   const legendRef: any = useRef(null);
   const chartRef: any = useRef(null);
 
   useEffect(() => {
-    if (chartRef.current && legendRef.current) {
-      const chart = chartRef.current;
-      const series = chart.series?.[0];
-      if (series) {
-        series.legend = legendRef.current;
-      }
-    }
+    setChartData(data);
   }, []);
 
   return (
@@ -59,6 +53,7 @@ export default function $(ClassName)() {
               dataSource={chartData}
               labelMemberPath="Company"
               valueMemberPath="MarketShare"
+              legend={legendRef.current}
               />
           </IgrDoughnutChart>
         </div>

packages/cli/templates/react/igr-ts/financial-chart/default/files/src/app/__path__/__filePrefix__.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { IgrFinancialChartModule } from 'igniteui-react-charts';
 import { IgrFinancialChart } from 'igniteui-react-charts';
 import style from './style.module.css';
@@ -22,7 +22,11 @@ const data: any = [
 
 export default function $(ClassName)() {
   const title = 'Financial Chart';
-  const [chartData] = useState(data);
+  const [chartData, setChartData] = useState([]);
+
+  useEffect(() => {
+    setChartData(data);
+  }, []);
 
   return (
     <div>

packages/cli/templates/react/igr-ts/pie-chart/default/files/src/app/__path__/__filePrefix__.tsx

@@ -18,14 +18,12 @@ const data: any = [
 
 export default function $(ClassName)() {
   const title = 'Pie Chart';
-  const [chartData] = useState(data);
+  const [chartData, setChartData] = useState([]);
   const legendRef: any = useRef(null);
   const chartRef: any = useRef(null);
 
   useEffect(() => {
-    if (chartRef.current && legendRef.current) {
-      chartRef.current.legend = legendRef.current;
-    }
+    setChartData(data);
   }, []);
 
   return (
@@ -49,6 +47,7 @@ export default function $(ClassName)() {
             height="500px"
             ref={chartRef}
             legendLabelMemberPath="Label"
+            legend={legendRef.current}
           />
         </div>
       </div>

packages/cli/templates/react/igr-ts/projects/_base/files/package.json

@@ -27,6 +27,7 @@
     "@types/node": "^24.12.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.0.3",
     "@vitest/browser-playwright": "^4.1.0",
     "eslint": "^9.39.4",
     "eslint-plugin-react-hooks": "^7.0.1",

packages/cli/templates/react/igr-ts/projects/_base/files/vite.config.ts

@@ -1,11 +1,14 @@
+/// <reference types="vitest/config" />
 import { playwright } from '@vitest/browser-playwright'
-import { defineConfig } from 'vitest/config'
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   build: {
     chunkSizeWarningLimit: 10 * 1024 * 1024, // 10 MB
   },
+  plugins: [react()],
   test: {
     browser: {
       enabled: true,