import React from "react"; import { Line } from "react-chartjs-2"; import { Chart as ChartJS, LineElement, PointElement, CategoryScale, LinearScale, Tooltip, Legend, } from "chart.js"; ChartJS.register( LineElement, PointElement, CategoryScale, LinearScale, Tooltip, Legend ); const EnergyUsage = () => { const data = { labels: ["Mon", "Tue", "Wed", "Thu", "Fri"], datasets: [ { label: "Simulation 1", data: [400, 600, 450, 1000, 1000], borderColor: "#6a0dad", fill: false, tension: 0.5, // More curved line pointRadius: 0, // Remove point indicators }, { label: "Simulation 2", data: [300, 500, 700, 950, 1100], borderColor: "#b19cd9", fill: false, tension: 0.5, pointRadius: 0, }, ], }; const options = { responsive: true, plugins: { legend: { display: false, // Hide legend }, tooltip: { enabled: false, // Hide tooltips }, }, scales: { x: { display: false, // Hide x-axis grid: { display: false, }, }, y: { display: false, // Hide y-axis grid: { display: false, }, }, }, }; return (

Energy Usage

2500 kWh

Simulation 1
98%
Simulation 2
97%
); }; export default EnergyUsage;