mui-x line chart unable to render a partial data series alongsdie a complete data series

Question

I'm unable to render data from my stateFullTime array where the first two elements are null as I don't have data in those years. Ideally, I would want the state line series to begin at (x: 2011, y: 53.2). However, when I hover over the graph, I get the following error:

not-found-boundary.js:22 Uncaught TypeError: Cannot read properties of null (reading 'toLocaleString')

page.tsx:

"use client";

import * as React from "react";
import { LineChart } from "@mui/x-charts/LineChart";

const suburbFullTime = [50, 53.1, 52.5, 53.5, 53.2];
const stateFullTime = [null, null, 53.2, 57.2, 57.1];
const australiaFullTime = [55.1, 55.3, 54.9, 57.2, 56.8];

export default function FullTimeEmploymentLineGraph() {
    return (
        <div>
            <div className="flex flex-col justify-center">
                <h1 className="mt-4 text-lg text-center font-bold">Full-time employment</h1>
                <div className="mx-auto -mt-10">
                    <LineChart
                        xAxis={[
                            {
                                data: ["2001", "2006", "2011", "2016", "2021"],
                            },
                        ]}
                        series={[
                            {
                                id: "suburb",
                                label: "Suburb",
                                data: suburbFullTime,
                                showMark: false,
                                curve: "natural",
                            },
                            {
                                id: "state",
                                label: "State",
                                data: stateFullTime,
                                showMark: false,
                                curve: "natural",
                            },
                            {
                                id: "australia",
                                label: "Australia",
                                data: australiaFullTime,
                                showMark: false,
                                curve: "natural",
                            },
                        ]}
                        sx={{
                            "--ChartsLegend-itemWidth": "70px",
                            "--ChartsLegend-itemMarkSize": "10px",
                            "--ChartsLegend-labelSpacing": "5px",
                            "--ChartsLegend-rootSpacing": "20px",
                        }}
                        legend={{
                            direction: "row",
                            position: {
                                vertical: "top",
                                horizontal: "middle",
                            },
                        }}
                        width={600}
                        height={400}
                        margin={{ left: 70 }}
                    />
                </div>
            </div>
        </div>
    );
}

I've tried using null or NaN. Using 0 works but will show the line graph with markers at x=2001 and x=2006 which is not what I want to show.

Have looked through open/closed issues on the mui-x GH but with no luck.

Answer 1

I have confirmed with the maintainers of this package that it's not yet possible as of v6.0.0-alpha.16, but this is something they are taking into consideration.