racecar_analytics chart component

Chart.tsx

import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
} from "recharts";

const Chart = () => {
    return (
      <div className="mx-2 text-center">
          <h4 className="my-2">Motor RPM</h4>
          <ResponsiveContainer width="100%" height={250}>
            <LineChart
              width={500}
              height={300}
              data={ecuData}
            >
              <CartesianGrid strokeDasharray="4 3" stroke="#343434" />
              <XAxis
                dataKey="created_at"
                stroke="white"
                tick={{ fill: "gray" }}
                tickFormatter={(timestamp) =>
                  new Date(timestamp).toLocaleTimeString()
                }
              />
              <YAxis
                stroke="white"
                tick={{ fill: "gray" }}
                domain={["dataMin", "dataMax"]}
                allowDataOverflow={true}
              />
              <Tooltip />
              <Line
                type="monotone"
                dataKey="motor_rpm"
                stroke="#820DDF"
                strokeWidth={2}
                isAnimationActive={false}
                animateNewValues={false}
              />
            </LineChart>
          </ResponsiveContainer>
        </div>
    );
  };