React Recharts - How to sort X-Axis with time?

I have data like the examples. Instead of Category i have time instead for one whole day for each quarter. If a quarter doesnt have data there is no value for it. For example 08:30 doesnt exist in Series 1. Therefore when the chart renders 08:30 will come after 08:45 since only Series 2 has a value for it. But obviously i want it right after 08:15. Everything else is correct. Only solution that im thinking of is to populate first element (Series 1) with every missing timeframe and with 0 as value for it. But I am hoping theres a better solution for this.

const series = [
  {
    name: 'Series 1',
    data: [
      { time: '08:00', value: Math.random() },
      { category: '08:15', value: Math.random() },
      { category: '08:45', value: Math.random() },
    ],
  },
  {
    name: 'Series 2',
    data: [
      { category: '08:00', value: Math.random() },
      { category: '08:15', value: Math.random() },
      { category: '08:30', value: Math.random() },
    ],
  },
];

Heres the relevant code as requested. Datakey is just a string to select which data to show. Because i have multiple "value" fields for the Y-Axis.

<ResponsiveContainer>
  <LineChart>
    <CartesianGrid strokeDasharray="2 2" />
    <XAxis
      dataKey="endTime"
      type="category"
      allowDuplicatedCategory={false}
    />
    <YAxis dataKey={dataKey} />
    <Tooltip />
    <Legend />
    {chartData.map((irvMachine, i) => (
      <Line
        data={irvMachine.data}
        name={irvMachine.irvMachine}
        dataKey={dataKey}
        stroke={colors[i]}
        activeDot={{ r: 4 }}
        type="monotone"
      />
    ))}
  </LineChart>
</ResponsiveContainer>

Solution

You can transform your data a bit to get a single series of data where "Series 1" and "Series 2" would be the value keys and sort on the "category" key. This way all categories show up in the desired order and any missing values for a single subseries are just a missing key for that entry.

Here's a sample function:

function transformSeries(series) {
    const chartDataObj = {};
    for (let i = 0; i < series.length; i++) {
        const seriesName = series[i].name;
        for (let j = 0; j < series[i].data.length; j++) {
            const category = series[i].data[j].category;
            const value = series[i].data[j].value;
            if (!chartDataObj.hasOwnProperty(category)) {
                chartDataObj[category] = { category: category };
            }
            chartDataObj[category][seriesName] = value;

            if (!chartDataObj[category].hasOwnProperty("maxVal")) {
                chartDataObj[category].maxVal = value;
            } else {
                chartDataObj[category].maxVal = Math.max(chartDataObj[category].maxVal, value);
            }
        }
    }
    return Object.values(chartDataObj).sort((a, b) => (a.category > b.category ? 1 : -1));
}

The result of calling this function on the data you provided is:

[
    {category: "08:00", "Series 1": 0.7467901762604093, "Series 2": 0.47855212989392215, maxVal: 0.7467901762604093},
    {category: "08:15", "Series 1": 0.2311522761588818, "Series 2": 0.12893275264478166, maxVal: 0.2311522761588818},
    {category: "08:30", "Series 2": 0.924208327780883, maxVal: 0.924208327780883},
    {category: "08:45", "Series 1": 0.8633031302477523, maxVal: 0.8633031302477523}
]

This also includes a maxVal key to provide to the YAxis component (since it doesn't currently support multiple keys).

Then you can render like this:

export function MyChart() {
    const chartData = transformSeries(series);

    return (
        <LineChart width={800} height={450} data={chartData}>
            <CartesianGrid strokeDasharray="2 2" />
            <XAxis dataKey="category" type="category" allowDuplicatedCategory={false} />
            <YAxis dataKey="maxVal" />
            <Tooltip />
            <Legend />
            {series.map((s) => (
                <Line key={s.name} dataKey={s.name} />
            ))}
        </LineChart>
    );
}