API works!

frontend/src/chartComponent.js

 import * as React from "react";
-import { useState } from 'react';
+import { useState, useEffect} from 'react';
 import {
   Chart as ChartJS,
   CategoryScale,
@@ -11,7 +11,6 @@ import {
   Legend,
 } from 'chart.js';
 import { Line } from 'react-chartjs-2';
-import { faker } from "@faker-js/faker";
 
 ChartJS.register(
   CategoryScale,
@@ -36,35 +35,59 @@ export const options = {
   },
 };
 
-const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
+const ChartComponent = (props) => {
 
-export const data = {
-  labels,
-  datasets: [
-    {
-      label: 'Power Usage',
-      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
-      borderColor: 'red',
-      backgroundColor: 'red',
-    },
-    {
-      label: 'Water Usage',
-      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
-      borderColor: 'blue',
-      backgroundColor: 'blue',
-    },
-  ],
-};
+  const [chartData, setChartData] = useState(null);
 
-const ChartComponent = (props) => {
+  const fetchData = async () => {
+    try {
+      const response = await fetch('http://127.0.0.1:5000/api/costData');
+
+      if (!response.ok) {
+        throw new Error('Network response was not ok');
+      }
+      
+      const chartData = await response.json();
+      setChartData(chartData);
+    } catch (error) {
+      console.error('There was a problem with the fetch operation:', error);
+    }
+  };
 
+  useEffect(() => {
+    fetchData();
+  }, []);
 
+  const data = {
+    labels: chartData ? chartData.map(data => data[0]) : [],
+    datasets: [
+      {
+        label: 'Power Usage (MW)',
+        data: chartData ? chartData.map(data => (data[1] / 1000)) : [],
+        borderColor: 'red',
+        backgroundColor: 'red',
+      },
+      {
+        label: 'Cost ($)',
+        data: chartData ? chartData.map(data => data[2]) : [],
+        borderColor: 'green',
+        backgroundColor: 'green',
+      },
+      {
+        label: 'Water Usage',
+        data: chartData ? chartData.map(data => data[3]) : [],
+        borderColor: 'blue',
+        backgroundColor: 'blue',
+      },
+    ],
+  };
 
-    return(
-        <div id="chart">
-            <Line options={options} data={data}  />
-        </div>
-    );
-}
+  return (
+    <div id="chart">
+      {chartData && <Line options={options} data={data} />}
+    </div>
+  );
+};
 
 export default ChartComponent;
+