MultipleAxes Issue

[xVertinx]

Hello, I am a beginner from China and encountered some problems when using MultipleAxes charts. When I converted the label data of the x-axis into a string(No problem with numbers), I reported the following error: error:<correct>attribute x: Expected length, "NaN" And error:<correct>attribute width: Expected length, "NaN". After my exploration, I found that there are errors in versions after beta=3.0.0 beta. 31, and there is also some axis offset in version 30. Currently, only version 31 can display correctly. Because I am a novice using this chart, I hope to receive help. If it is my problem, I hope to be corrected. Thank you very much!

Modify Examples like this:

MultipleAxes.tsx

export default function MultipleAxes() {
  const { data, randomizeData } = useDemoConfig({
    series: 6,
    dataType: "time",  // It's not related to dataType either
  });

  // @ts-ignore
  data.forEach((d, i) => (d.secondaryAxisId = i > 2 ? "2" : undefined));

  // modify here !!  *problem*
  data.forEach((d, i) => {
    d.data.forEach((d, i) => {
      d.primary = i + 'a' 
    })
  });

  const primaryAxis = React.useMemo<
    AxisOptions<typeof data[number]["data"][number]>
  >(
    () => ({
      getValue: (datum) => datum.primary,
      // Pad the automatically detected time scale with half of the band-size
      padBandRange: true,
    }),
    []
  );

  const secondaryAxes = React.useMemo<
    AxisOptions<typeof data[number]["data"][number]>[]
  >(
    () => [
      {
        getValue: (datum) => datum.secondary,
        elementType: "bar",
        // stacked: true,
      },
      {
        id: "2",
        getValue: (datum) => datum.secondary,
        elementType: "line",
      },
    ],
    []
  );

  return (
    <>
      <button onClick={randomizeData}>Randomize Data</button>
      <br />
      <br />
      <ResizableBox>
        <Chart
          options={{
            data,
            primaryAxis,
            secondaryAxes,
          }}
        />
      </ResizableBox>
    </>
  );
}

[bkannanv1]

+1

@xVertinx The problem I guess is that primaryAxis expects a valid value, but in your case, I think you have provided a string like '0a', '1b', etc.

But on a related note, the MultipleAxes example is broken in the latest beta.

The demo is on 3.0.0-beta.30 so the MultipleAxes example works correctly.

With the latest version 3.0.0-beta.57, we are getting this error: react-dom.development.js:798 Error: <rect> attribute x: Expected length, "NaN"