I'm trying to make basic plots in Recharts (using React) and Flask (using the Formula1 API). The data I get in Flask is originally a datetime.timedelta object and I'm having trouble sending it over to React. To send the data, it needs to be JSON serializable, so I tried converting it to:

• a string (of the timedelta object)
• an integer (timedelta converted to nanoseconds)

but I'm not sure how to unpack these in React.

Here are the 2 data formats I tried.

>>> data_str = [{
     "LapNumber": '0',
     "44": "0 days 00:01:27.440000",
     "6": "0 days 00:01:27.313000"},
    {"name": '1',
     "44": "0 days 00:01:28.982000",
     "6":  "0 days 00:01:27.504000"
     }]
>>> data_int = [{
         "LapNumber": '0',
         "44": 87440000000,
         "6": 87313000000},
        {"LapNumber": '1',
         "44": 88982000000,
         "6":  87504000000
         }]

app.py

@app.route('/api/lap_number_time')
def getChartData():
    # data = list of dictionaries in one of the formats shown above
    return jsonify(data)

App.js

useEffect(() => {
        fetch("http://127.0.0.1:5000/api/lap_number_time")
            .then((res) => res.json())
            .then((data) => {
                console.log("first chart data is", data)
                setCurrentChartData(data)
            })
    }, [])

...
<LineChart width={400} height={400} data={currentChartData}>
    <Line type="monotone" dataKey="14" stroke="#8884d8" />
    <Line type="monotone" dataKey="ham" stroke="#82ca9d" />
    <Line type="monotone" dataKey="6" stroke="#1a5d57" />
    <XAxis dataKey="LapNumber"/>
    <YAxis />
    <Legend />
</LineChart>

My questions are:

1. Can I transfer the timedelta object to Recharts and plot it there (since integer conversion for each data point would take a long time)?
2. If not, I got Recharts to successfully plot when its in integer format. But, I need help displaying it in [%min:%sec:%millisec] format in Recharts.