Grpah works, but no lines on it

src/components/graph.svelte

@@ -1,24 +1,37 @@
 <script lang="ts">
 import highcharts from "./highcharts";
+export let ubicacio: string = '';
+export let series: Array<any> = [];
 
 let config = {
+chart: {
+	type: 'spline'
+},
 title: {
-        text: 'Solar Employment Growth by Sector, 2010-2016'
+		text: `Temps a ${ubicacio}`
 	},
 
 	subtitle: {
-        text: 'Source: thesolarfoundation.com'
+		text: 'Dades: open-meteo.com'
 	},
 
 	yAxis: {
 		title: {
-            text: 'Number of Employees'
+			text: 'Temperatura'
 		}
 	},
 
 	xAxis: {
+		type: 'datetime',
+		tickInterval: 36e5,
+		tickLength: 0,
+		startOnTick: false,
+		endOnTick: false,
+		title: {
+			text: 'Data'
+		},
 		accessibility: {
-            rangeDescription: 'Range: 2010 to 2017'
+			rangeDescription: 'Temps per hores'
 		}
 	},
 
@@ -30,13 +43,15 @@ title: {
 
 	plotOptions: {
 		series: {
-            label: {
-                connectorAllowed: false
-            },
-            pointStart: 2010
+			marker: {
+				enabled: true,
+				radius: 2.5
+			}
 		}
 	},
 
+	series: series,
+	/*
 	series: [{
 		name: 'Installation',
 		data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
@@ -52,7 +67,7 @@ title: {
 	}, {
 		name: 'Other',
 		data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
-    }],
+	}], */
 
 	responsive: {
 		rules: [{

src/routes/+layout.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { NavbarObject } from "../classes/NavObject";
     import Navbar from "../components/navbar.svelte";
+	import './styles.css';
 
 	let navbarElemenets: NavbarObject[] = [new NavbarObject('/', 'Home'), new NavbarObject('/temps', 'Temps'), new NavbarObject('/xema', 'Estacions'), new NavbarObject('/openmeteo', 'Dades Open Meteo')]
 </script>

src/routes/openmeteo/+page.server.ts

@@ -15,14 +15,11 @@ export function load(): object {
 	})
 	.then( (res) => {
 		let forecastData: object = res.hourly;
-		let fmtForecastData: { labels: string[], datasets: Array<object> } = { labels: forecastData.time, datasets: [] };
-		let noTimeForecastData: object = Object.fromEntries(Object.entries(forecastData).filter( ([k]) => k !== 'time' ));
-		for (const label in noTimeForecastData) {
-			if (noTimeForecastData.hasOwnProperty(label)) {
-				const data = noTimeForecastData[label];
-				fmtForecastData.datasets.push({label, data})
-			}
-		}
+		let fmtForecastData: { title: string, data: [Date, number] | [] } = { title: 'Temps', data: [] };
+		let regex: RegExp = /(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})/
+		forecastData.time.forEach( (elem, idx) => { 
+			fmtForecastData.data.push([Date.parse(elem), forecastData.temperature_2m[idx]])
+		});
 		return fmtForecastData;
 	} )
 

src/routes/openmeteo/+page.svelte

@@ -5,7 +5,7 @@
 	let display: string = 'none';
 	let loading: boolean = false;
 
-	export let data: any;
+	export let data: { ubicacio: string, temps: any };
 
 	function toggleDisplay(): void {
 		display = (display === 'none') ? 'block' : 'none';
@@ -21,7 +21,7 @@
 <h2>Ubicació actual: { data.ubicacio }</h2>
 <button type="button" on:click={toggleDisplay}>Canviar ubicació</button>
 <pre>{ JSON.stringify(data) }</pre>
-<Graph />
+<Graph ubicacio={data.ubicacio} series={data.temps} />
 <footer>
 <p>Dades provinents de:</p>
 <ul>

src/routes/styles.css

@@ -0,0 +1,3 @@
+body {
+	margin: 0;
+}