[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.

[mircowidmer]

@oliviertassinari

The screenshot above is from the link you posted. Unfortunately there are no points visible.

If I try to use the following segment:

<Box style={{width: '100%', height: '400px'}}>
  <ResponsiveChartContainer
    series={series}
    xAxis={[
      {
        id: 'exyear',
        data: dashboardStore.premiumTurnovers.map((premiumTurnover: DtoPremiumTurnover) => premiumTurnover.EXYEAR),
        scaleType: 'band',
      },
    ]}
    yAxis={[
      {
        id: 'prmin',
        scaleType: 'linear',
      },
      {
        id: 'turnover',
        scaleType: 'point',
      },
    ]}
    margin={{left: 100, right: 80}}
  >
    <BarPlot />
    <LinePlot />

    <ChartsXAxis position="bottom" />
    <ChartsYAxis
      label="Umsatz in CHF"
      position="left"
      axisId="turnover"
      sx={{
        [`& .${axisClasses.label}`]: {
          transform: 'translateX(-60px)',
        },
      }}
    />
    <ChartsYAxis
      label="Prämie in CHF"
      position="right"
      axisId="prmin"
      sx={{
        [`& .${axisClasses.label}`]: {
          transform: 'translateX(40px)',
        },
      }}
    />
    <ChartsTooltip />
  </ResponsiveChartContainer>
</Box>

I'll get the following error:

I think scaleType: 'point', seems to cause problems.

[JCQuintas]

@mircowidmer can you provide a codesandbox with the current issue?

It appears that it arrises from your specific implementation details, and without further information it is a bit hard to help you.

[mircowidmer]

I have a working example here: https://codesandbox.io/p/sandbox/trusting-bhaskara-l863z2

If I change line 82 to scaleType: "point", it crashes.

[JCQuintas]

You need to make your sandbox public :)

[mircowidmer]

Is it accessible now?

[JCQuintas]

@mircowidmer yeah it works

So for scales of type band and point you have to provide values for it, since they work as "distinct" values. The code below should work, but it might be the case that you don't want to use point, but linear instead.

          {
            id: "turnover",
            scaleType: "point",
            reverse: true,
            data: data
              .map((premiumTurnover: any) => premiumTurnover.TURNOVER),
          },

As for the "circles", you can use <MarkPlot/> to render them. You can see them in use in the demos here: https://mui.com/x/react-charts/composition/#container-options

And also in the source code:

mui-x/packages/x-charts/src/LineChart/LineChart.tsx

Line 144 in 7120da2

const LineChart = React.forwardRef(function LineChart(inProps: LineChartProps, ref) {

[mircowidmer]

<MarkPlot /> was all that was missing on the first look. Thank you!!

[JCQuintas]

Glad to have helped 😄

It is always good to read the source code in these composition cases, because most of the times we use the same APIs.

I'll be closing this issue now, feel free to open a new one if you encounter a bug or issue 👍

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

We value your feedback @mircowidmer! How was your experience with our support team?
If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!