[charts] LinePlot does not allow to use scaleType 'points'

[mircowidmer]

Summary

When I use LineChart, using the scaleType point works as expected:

<LineChart
  width={500}
  height={300}
  series={[
    { data: pData, label: 'pv' },
    { data: uData, label: 'uv' },
  ]}
  xAxis={[{ scaleType: 'point', data: xLabels }]}
/>

When I use the LinePlot in a combined setup, I have no way of setting the scaleType to point.

See: https://mui.com/x/api/charts/axis-config/#axis-config-prop-scaleType

Examples

No response

Motivation

No response

Search keywords: LinePlot ScaleType

[JCQuintas]

Hi @mircowidmer, it seems you are using composition. You can read more about it here: https://mui.com/x/react-charts/composition/

When using LinePlot, it needs to be inside a (Responsive)ChartContainer and all the props go in the ChartContainer itself, as that is the component that sets up all the necessary contexts we use internally.

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

export default function BasicLineChart() {
  return (
    <ResponsiveChartContainer
      height={300}
      width={500}
      series={[
        {
          type: "line",
          data: [2, 5.5, 2, 8.5, 1.5, 5],
        },
      ]}
      xAxis={[
        {
          scaleType: "point",
          data: [1, 2, 3, 5, 8, 10],
        },
      ]}
    >
      <LinePlot />
    </ResponsiveChartContainer>
  );
}

You can see it in action on this sandbox: https://codesandbox.io/p/sandbox/friendly-wing-tk8k95?file=%2Fsrc%2FDemo.tsx

[mircowidmer]

@JCQuintas Thank you for your comment. I‘ll check it first thing tomorrow and see if I‘ll get your suggestion to work.