react-charts error: Cannot read properties of undefined (reading 'some')

Question

I'm hoping somebody can help me with this error I keep getting while trying to implement a line chart from react-charts ("react-charts": "3.0.0-beta.38"): Uncaught TypeError: Cannot read properties of undefined (reading 'some'). I have a page where I'm dispatching the custom hook to get the data from API, once I have it I conditionally render the chart which has the data as a prop - see more below.

main page

import { LineChart } from '../globalComponents/LineChart';

export const NodeHealth = () => {
  const [cpuData, setCpuData] = useState([]);
  const [cpuCols, setCpuCols] = useState([]);
  const [chartData, setChartData] = useState([]);
  const { fetchData, data, loading, error } = useAxiosFetch('/api/node/cpu');

  useEffect(() => {
    fetchData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    if (data) {
      setCpuCols(data[0].columns);
      setCpuData(data[0].values);
    }
    if (cpuData) {
      setChartData(createDataObj(cpuCols, cpuData));
    }
  }, [data, cpuData, cpuCols]);

  return (
    <>
      <SectionHeader pageHeading="Node Health" />
      <Layout.Body data-testid="homePage" includeRail>
        <Card className="hc-pa-normal">
          <Grid.Container>
            <Grid.Item>
              <div id="chartdiv" style={{ width: '100%', height: '450px' }}>
                {chartData.length > 0 && (
                  <LineChart title="Test Chart" graphData={chartData} />
                )}
              </div>
            </Grid.Item>
          </Grid.Container>
        </Card>
      </Layout.Body>
    </>
  );
};

Chart component

import { useMemo } from 'react';
import { Chart } from 'react-charts';

export const LineChart = ({ title, graphData }) => {

  const primaryAxis = useMemo(
    () => ({
      getValue: (datum) => datum.time,
    }),
    []
  );

  const secondaryAxes = useMemo(
    () => [
      {
        getValue: (datum) => datum.usage_percent, 
        elementType: 'line',
      },
    ],
    []
  );

  return (
    <>
      <Chart options={{ data: graphData, primaryAxis, secondaryAxes }} />
    </>
  );
};

I can see the data is being passed correctly to the chart component; however I keep getting the undefined error and it stems from this function:

function getFirstDefinedValue(options, data) {
  var firstDefinedValue;
  data.some(function (serie) {
    return serie.data.some(function (originalDatum) {
      var value = options.getValue(originalDatum);

      if (value !== null && typeof value !== 'undefined') {
        firstDefinedValue = value;
        return true;
      }
    });
  });
  return firstDefinedValue;
}

I've tried their docs and repo, plus different google searches but not having much luck. Any advice or tips would be greatly appreciated.

react-charts error: Cannot read properties of undefined (reading 'some')

0 Answers0