adjusting the chart legend

src/Charts/NegativeStatusChart.jsx

@@ -2,13 +2,12 @@ import React from 'react';
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
 
 const SystemStatusChart = ({ data }) => {
-    // Обрезаем массив, оставляя только последние 20 точек
     const trimmedData = data.slice(-20);
 
     return (
         <ResponsiveContainer width="100%" height={300}>
             <LineChart
-                data={trimmedData} // Используем обрезанный массив
+                data={trimmedData}
                 margin={{
                     top: 5, right: 30, left: 20, bottom: 5,
                 }}
@@ -18,7 +17,13 @@ const SystemStatusChart = ({ data }) => {
                 <YAxis domain={[0, 100]} />
                 <Tooltip />
                 <Legend />
-                <Line type="monotone" dataKey="status" stroke="#8884d8" activeDot={{ r: 8 }} />
+                <Line
+                    type="monotone"
+                    dataKey="status"
+                    stroke="#8884d8"
+                    activeDot={{ r: 8 }}
+                    name=""
+                />
             </LineChart>
         </ResponsiveContainer>
     );

src/Charts/SystemStatusChart.jsx

@@ -5,6 +5,22 @@ const SystemStatusChart = ({ data }) => {
     // Обрезаем массив, оставляя только последние 20 точек
     const trimmedData = data.slice(-20);
 
+    const CustomTooltip = ({ active, payload, label }) => {
+        if (active && payload && payload.length) {
+            return (
+                <div className="custom-tooltip" style={{
+                    backgroundColor: '#fff',
+                    padding: '10px',
+                    border: '1px solid #ccc'
+                }}>
+                    <p>{`Время: ${label}`}</p>
+                    <p>{`Значение: ${payload[0].value}`}</p>
+                </div>
+            );
+        }
+        return null;
+    };
+
     return (
         <ResponsiveContainer width="100%" height={300}>
             <LineChart
@@ -16,8 +32,7 @@ const SystemStatusChart = ({ data }) => {
                 <CartesianGrid strokeDasharray="3 3" />
                 <XAxis dataKey="time" />
                 <YAxis domain={[0, 100]} />
-                <Tooltip />
-                <Legend />
+                <Tooltip content={<CustomTooltip />} />
                 <Line type="monotone" dataKey="status" stroke="#8884d8" activeDot={{ r: 8 }} />
             </LineChart>
         </ResponsiveContainer>