Search code examples
mui-xmui-x-charts

LineChart with dataset not picking up yAxis


I have a dataset defined like this:

{
  "events": [
    {
      "name": "Sample 1",
      "date": "1/1/2023",
      "value": 1234
    },
    {
      "name": "Sample 2",
      "date": "2/1/2023",
      "value": 4576
    },
    ...
  ]
}

and a LineChart like:

<LineChart
  xAxis={[
    { dataKey: "date" }
  ]}
  series={[
    { dataKey: "value" }
  ]}
  dataSet={data.events}
  height={200}
/>

When I render, however, I get an error: Warning: Failed prop type: The prop ownerState.x is marked as required in MuiMarkElementRoot, but its value is undefined.

I drilled down through the components, and I can see the CartesianContextProvider has the xAxisset to the "date" field, butyAxisisundefined. I am pretty sure my series is wrong, but not sure why as there doesn't seem to be much documentation around the series` field and what values it can accept.


Solution

  • I figured it out...it wasn't the series causing the issue, it was the xAxis. The date value was a string and not a real date, so I needed to set the scaleType to band.