Why is the data from my API not displaying on my chart.js chart in React?

I am making a SPA in React that displays data in a chart.js graph from the Carbon Intensity API which can be found here: https://carbon-intensity.github.io/api-definitions/?shell#get-intensity-from-to .

I have been able to get the data from the API using axios and can see this when I inspect the console, however it just parses in NaN for all the data when you inspect it in the console:

I will post all relevant code below, my desired output is for the data from the API to be displayed on the line chart.

Chart3.js

import React, { useState, useEffect } from "react";
import { Line } from "react-chartjs-2";
import axios from "axios";

const Chart3 = () => {
  const [chartData, setChartData] = useState({});
  const [Forecast, setForecast] = useState([]);
  const [Actual, setActual] = useState([]);

  const chart = () => {
    let Fore = [];
    let Act = [];


    axios
      .get('https://api.carbonintensity.org.uk/intensity/2020-08-25T15:30Z/2020-09-10T17:00Z')
      .then(res => {
        console.log(res);
        for (const dataObj of res.data.data) {
          Fore.push(parseInt(dataObj.forecast));
          Act.push(parseInt(dataObj.actual));
        }
        setChartData({
          labels: Fore,
          datasets: [
            {
              label: "Forestreet",
              data: Act,
              backgroundColor: ["rgba(75, 192, 192, 0.6)"],
              borderWidth: 4
            }
          ]
        });
      })
      .catch(err => {
        console.log(err);
      });
    console.log(Fore, Act);
  };

  useEffect(() => {
    chart();
  }, []);
  return (
    <div className="App">
      <h1>Dankmemes</h1>
      <div style={{height:"500px", width:"500px"}}>
        <Line
          data={chartData}
          options={{
            responsive: true,
            title: { text: "ForeStreet", display: true },
            scales: {
              yAxes: [
                {
                  ticks: {
                    autoSkip: true,
                    maxTicksLimit: 10,
                    beginAtZero: true
                  },
                  gridLines: {
                    display: false
                  }
                }
              ],
              xAxes: [
                {
                  gridLines: {
                    display: false
                  }
                }
              ]
            }
          }}
        />
      </div>
    </div>
  );
};

export default Chart3;

App.js

import React from 'react';
import { BrowserRouter as Router} from 'react-router-dom';
import './App.css';
import Chart from './Components/Chart/Chart';
import Chart1 from './Components/Chart/Chart1';
import Chart2 from './Components/Chart/Chart2';
import Chart3 from './Components/Chart/Chart3';
import Footer from './Components/Footer/Footer';
import Header from './Components/Header/Header';
import Container from './Components/Hero/Hero';
import Hero from './Components/Hero/Hero';

function App() {
  return (
    <Router>
        <Header />
        <Chart3 />
        <Footer />
    </Router>
      
    
  );
}

export default App;

This is what my chart currently looks like it with the API data: