[Card] Research/test graph card #111

New issue

Open

opened 2026-04-02 07:58:21 +00:00 by a24vinla · 1 comment

a24vinla commented

2026-04-02 07:58:21 +00:00

Collaborator

Please document all findings for future discussion
Parent Issues: #106 #23

Please document all findings for future discussion Parent Issues: #106 #23

a24vinla added the

frontEnd

research

labels

2026-04-02 07:58:21 +00:00

c22abdal commented

2026-04-07 14:34:09 +00:00

Collaborator

One solution is:

To show a Graph/Chart of the temperature, the simplest solution is to use Recharts with React.

1- install recharts / npm install recharts
2- create a file called Graph.js in components in frontend
3- populate that file with the necessary libraries :
import React from "react";
import Card from "./Card"; // Needed since the graph will probably be inside the card?
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip } from "recharts";

4- Create a line chart. Line charts are best for showing the temperature over time. X = time, Y = temperature.
code example:
export default function GraphCard() {
return (

);
}

5- Finally, display the graph in the TemperatureView.js file

One solution is: To show a Graph/Chart of the temperature, the simplest solution is to use Recharts with React. 1- install recharts / npm install recharts 2- create a file called Graph.js in components in frontend 3- populate that file with the necessary libraries : import React from "react"; import Card from "./Card"; // Needed since the graph will probably be inside the card? import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip } from "recharts"; 4- Create a line chart. Line charts are best for showing the temperature over time. X = time, Y = temperature. code example: export default function GraphCard() { return ( <Card title="Temperature"> <LineChart width={300} height={150} data={data}> <CartesianGrid strokeDasharray="3 3" /> <XAxis dataKey="time" /> <YAxis /> <Tooltip /> <Line type="monotone" dataKey="temp" stroke="#8884d8" /> </LineChart> </Card> ); } 5- Finally, display the graph in the TemperatureView.js file

a24vinla referenced this issue

2026-04-13 11:44:36 +00:00

Detailed chart/diagram library research #260