CartesianGrid - Can no longer render CartesianGrid alone

[ckifer]

Discussed in #3906

^{Originally posted by sahillihas2021 October 26, 2023}
I am displaying a multilinechart (Having multiple Y-Axis), it's working perfectly fine in my local, but when I am deploying it to the internal dev server, it is giving an error for the same code on : ERROR

Cannot read properties of null (reading 'ticks')
TypeError: Cannot read properties of null (reading 'ticks')
at CartesianGrid.render (https://react.qa.he.az.devmfi.net/static/js/bundle.js:197529:66)
at finishClassComponent (https://react.qa.he.az.devmfi.net/static/js/bundle.js:167192:35)
at updateClassComponent (https://react.qa.he.az.devmfi.net/static/js/bundle.js:167149:28)
at beginWork (https://react.qa.he.az.devmfi.net/static/js/bundle.js:168775:20)
at HTMLUnknownElement.callCallback (https://react.qa.he.az.devmfi.net/static/js/bundle.js:153766:18)
at Object.invokeGuardedCallbackDev (https://react.qa.he.az.devmfi.net/static/js/bundle.js:153810:20)
at invokeGuardedCallback (https://react.qa.he.az.devmfi.net/static/js/bundle.js:153867:35)
at beginWork$1 (https://react.qa.he.az.devmfi.net/static/js/bundle.js:173741:11)
at performUnitOfWork (https://react.qa.he.az.devmfi.net/static/js/bundle.js:172988:16)
at workLoopSync (https://react.qa.he.az.devmfi.net/static/js/bundle.js:172911:9)

Due to: [Refer the Code below)

yAxisComponents.push(
<YAxis
key={yAxisId}
yAxisId={yAxisId}
orientation={orientation}
axisLine={{ display: 'none' }}
tickLine={{ display: 'none' }}
tick={{
fill: tickColor,
fontSize: 16,
fontWeight: 'bold'
}}
/>
);

Code:

import React, { useState, useEffect } from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';
import PropTypes from 'prop-types';
import Loading from '../../Loading/Loading';
function MultipleYAxesLineChart({ data, CustomXAxisTick, loading }) {
  MultipleYAxesLineChart.propTypes = {
    data: PropTypes.array.isRequired,
    CustomXAxisTick: PropTypes.array.isRequired,
    loading: PropTypes.bool.isRequired,
  };

  const [groupedData, setGroupedData] = useState({});
  useEffect(() => {
    const grouped = data.reduce((result, item) => {
      const { DeviceId } = item;
      if (!result[DeviceId]) {
        result[DeviceId] = [];
      }
      result[DeviceId].push(item);
      return result;
    }, {});
    setGroupedData(grouped);
  }, [data]);
  const deviceIds = Object.keys(groupedData);
  const numYAxes = deviceIds.length;
  const customColorScale = ['#72CCC0', '#5E89D8', '#FFD00A', '#A16CB4', '#6A864E', '#7E682D'];
  const [slicedDataByDeviceId, setSlicedDataByDeviceId] = useState({});
  useEffect(() => {
    const updatedSlicedData = {};
    const firstTimestamp = CustomXAxisTick[0];
    const lastTimestamp = CustomXAxisTick[CustomXAxisTick.length - 1];
    for (const DeviceId in groupedData) {
      const deviceData = groupedData[DeviceId];
      const extractedData = [];
      for (let i = firstTimestamp; i <= lastTimestamp; i += 60 * 1000) {
        const timestamp = i;
        const entry = deviceData.find((item) => item.sensorTimestamp === i);
        if (entry) {
          extractedData.push(entry);
        }
      }
      updatedSlicedData[DeviceId] = extractedData;
    }
    setSlicedDataByDeviceId(updatedSlicedData);
  }, [groupedData, CustomXAxisTick]);
  const yAxisComponents = [];
  for (let i = 0; i < numYAxes; i += 1) {
    const orientation = i < 3 ? 'left' : 'right';
    const yAxisId = `${orientation}${i + 1}`;
    const tickColor = customColorScale[i % customColorScale.length];
    yAxisComponents.push(
      <YAxis
        key={yAxisId}
        yAxisId={yAxisId}
        orientation={orientation}
        axisLine={{ display: 'none' }}
        tickLine={{ display: 'none' }}
        tick={{
          fill: tickColor,
          fontSize: 16,
          fontWeight: 'bold',
        }}
      />
    );
  }
  const [hiddenLines, setHiddenLines] = useState({});
  const CustomLegend = () => {
    const toggleLineVisibility = (DeviceId) => {
      setHiddenLines((prevHiddenLines) => ({
        ...prevHiddenLines,
        [DeviceId]: !prevHiddenLines[DeviceId],
      }));
    };
    const legendItems = [];
    for (const DeviceId in groupedData) {
      const deviceData = groupedData[DeviceId];
      if (deviceData.length > 0) {
        const { KPI_Label } = deviceData[0];
        const color = customColorScale[legendItems.length % customColorScale.length];
        legendItems.push(
          <div
            key={DeviceId}
            style={{
              display: 'flex',
              alignItems: 'center',
              marginRight: '20px',
              cursor: 'pointer',
              textDecoration: hiddenLines[DeviceId] ? 'line-through' : 'none',
            }}
            onClick={() => {
              toggleLineVisibility(DeviceId);
            }}
          >
            <div style={{ backgroundColor: color, width: '20px', height: '6px', marginRight: '5px' }} />
            <div>{KPI_Label}</div>
          </div>
        );
      }
    }
    return <div style={{ display: 'flex', alignItems: 'center' }}>{legendItems}</div>;
  };
  const containerStyle = {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    width: '1300px',
  };
  const [allLegendsClicked, setAllLegendsClicked] = useState(false);
  useEffect(() => {
    const areAllClicked = deviceIds.every((DeviceId) => hiddenLines[DeviceId]);
    setAllLegendsClicked(areAllClicked);
  }, [hiddenLines, deviceIds]);
  const CustomTooltip = ({ active, payload, label }) => {
    if (active && payload && payload.length) {
      const formatDate = (timestamp) => {
        const date = new Date(timestamp);
        const formattedDate = date.toLocaleDateString('en-US', {
          year: 'numeric',
          month: 'short',
          day: 'numeric',
          hour: 'numeric',
          minute: 'numeric',
        });
        return formattedDate;
      };
      return (
        <div style={{ background: 'white', border: '1px solid #ccc', padding: '10px', textAlign: 'left' }}>
          <div style={{ color: 'black', marginBottom: '5px' }}>Time: {formatDate(label)}</div>
          {payload.map((dataItem, index) => (
            <div key={`tooltip-item-${index}`} style={{ display: 'flex', alignItems: 'center', marginBottom: '5px' }}>
              <div style={{ width: '20px', height: '6px', background: dataItem.color, marginRight: '5px' }}></div>
              <div style={{ color: 'black' }}>
                {dataItem.payload.KPI_Label}: {dataItem.value || 0} {dataItem.payload.Unit_of_Measure}
              </div>
            </div>
          ))}
        </div>
      );
    }
    return null;
  };
  CustomTooltip.propTypes = {
    active: PropTypes.bool,
    payload: PropTypes.arrayOf(
      PropTypes.shape({
        color: PropTypes.string,
        value: PropTypes.number,
        name: PropTypes.string,
      })
    ),
    label: PropTypes.string,
  };
  return (
    <div style={containerStyle}>
      {loading || data.length === 0 ? (
        <Loading />
      ) : (
        <>
          <div>
            <LineChart width={1300} height={400} data={slicedDataByDeviceId} margin={{ right: 30, bottom: 40 }}>
              <CartesianGrid strokeDasharray="3 3" />
              {allLegendsClicked ? null : (
                <XAxis
                  dataKey="sensorTimestamp"
                  type="category"
                  allowDuplicatedCategory={false}
                  ticks={CustomXAxisTick}
                  interval={0}
                  tickFormatter={(timestamp, index) => {
                    const date = new Date(timestamp);
                    const hours = date.getHours();
                    const minutes = date.getMinutes();
                    const ampm = hours >= 12 ? 'PM' : 'AM';
                    const formattedHours = hours % 12 || 12;
                    const formattedMinutes = minutes.toString().padStart(2, '0');
                    if (index == 0) {
                      const curTimestamp = CustomXAxisTick[index + 1];
                      const timeDiff = curTimestamp - timestamp;
                      if (timeDiff >= 23 * 3600 * 1000 && timeDiff <= 25 * 3600 * 1000) {
                        const months = [
                          'Jan',
                          'Feb',
                          'Mar',
                          'Apr',
                          'May',
                          'Jun',
                          'Jul',
                          'Aug',
                          'Sep',
                          'Oct',
                          'Nov',
                          'Dec',
                        ];
                        const month = months[date.getMonth()];
                        const day = date.getDate();
                        return `${month}-${day}`;
                      }
                    } else if (index > 0) {
                      const prevTimestamp = CustomXAxisTick[index - 1];
                      const timeDiff = timestamp - prevTimestamp;
                      if (timeDiff >= 23 * 3600 * 1000 && timeDiff <= 25 * 3600 * 1000) {
                        const months = [
                          'Jan',
                          'Feb',
                          'Mar',
                          'Apr',
                          'May',
                          'Jun',
                          'Jul',
                          'Aug',
                          'Sep',
                          'Oct',
                          'Nov',
                          'Dec',
                        ];
                        const month = months[date.getMonth()];
                        const day = date.getDate();
                        return `${month}-${day}`;
                      }
                    }
                    return `${formattedHours}:${formattedMinutes} ${ampm}`;
                  }}
                  tick={{ fontSize: 14 }}
                  tickMargin={25}
                />
              )}
              {yAxisComponents}
              <Tooltip content={<CustomTooltip />} />
              {deviceIds.slice(0, numYAxes).map((DeviceId, index) => (
                <Line
                  key={DeviceId}
                  type="monotone"
                  dataKey="value"
                  name={DeviceId}
                  data={slicedDataByDeviceId[DeviceId]}
                  yAxisId={yAxisComponents[index].props.yAxisId}
                  stroke={customColorScale[index % customColorScale.length]}
                  hide={hiddenLines[DeviceId]}
                  dot={false}
                />
              ))}
            </LineChart>
          </div>
          <CustomLegend />
        </>
      )}
    </div>
  );
}
export default MultipleYAxesLineChart;

The above code is accepting the data (To be displayed on the UI Line chart), CustomXAxisTick (X-axis values), loading (To load the page/refresh).

How can I fix this as I am not able to replicate the same scenario in my local server (Laptop).

Thankyou !

[ckifer]

reproduced here https://codesandbox.io/s/simple-line-chart-forked-62zxzr?file=/src/App.tsx

[ckifer]

PR here #3746, see comments added after merge

[morozovkirill]

I've checked my local branch and there is now such problem. I removed axis components and left only CartesianGrid and Area. So, result is:

And there is no errors in console.

May be there were other changes in release, which leaded to this. I think, you are right, the issues is about xAxis/yAxis doesn't exist, if we hide these components. But they should exist with default props (even if we don't draw them), because we'll not be able to draw grid in this case (without axes).

[ckifer]

@morozovkirill i don't think it's about having an axis with default props, it's mostly just that it used to not break and now it does (because of not checking for existence before spreading/accessing ticks). We just need to guard against that and the behavior will go back to what it was before - which is good enough for now

[morozovkirill]

It will not, if the bug in other place.

We can add check for existence and do nothing if it doesn't. But earlier the behavior differed. Grid was drawn, even if axis were hided.

[ckifer]

Hmm,ok. Well we need to guard for this either way, but I'll see if I can hunt down the other issue. Thanks

[ckifer]

After with guards (2.9):

Before (2.8):

These look the same to me - adding guards for the axis access and the scale access that happens after should be enough here

[morozovkirill]

Yeah, you are right. I didn't notice he hides Lines components too 🤦. So, check for existence is necessary.

[ckifer]

yAxis is null all along in this case, so there was no change from previous versions there - in the new version it is accessed without guards where previously it was not.

The scale issue is interesting - the new code calls getTicksOfAxis where the previous code did not.

Ah, this happens because the passed in scale is not actually null - it is instead { ticks: null } which fails the null check

[ckifer]

Ah the second part is also because of the change

          yAxis: {
            ...yAxis,
            ticks: isHorizontalValues ? horizontalValues : yAxis?.ticks,
          },

Creates an object like: { ticks: undefined } which then fails the in getTicksOfAxis because the axis != null no longer works for this case.

We'll need to not add the ticks property at all unless yAxis has a value

[ckifer]

so @morozovkirill a few action items on this:

1. Remove unsafe spreading of yAxis here (check for existence first) - even when checking for yAxis first make sure to add an optional on ticks
2. Add some more type safety to getTicksOfAxis - right now ticks is of type any which allows us to do unsafe access

[morozovkirill]

@ckifer could you fix it? I'm trying to build current version, but getting errors. And I don't know how to fix them.

recharts@2.9.0 build
npm run build-types && npm run build-cjs && npm run build-es6 && npm run build-umd

recharts@2.9.0 build-types
rimraf types && npm run tsc

recharts@2.9.0 tsc
tsc

test/cartesian/YAxis.spec.tsx:2:18 - error TS2307: Cannot find module 'jest-each' or its corresponding type declarations.

2 import each from 'jest-each';
~~~~~~~~~~~

test/cartesian/YAxis.spec.tsx:48:53 - error TS7006: Parameter 'length' implicitly has an 'any' type.

48 ]).it('Should render %s ticks when domain={%s}', (length, domain, textContent) => {
~~~~~~

test/cartesian/YAxis.spec.tsx:48:61 - error TS7006: Parameter 'domain' implicitly has an 'any' type.

48 ]).it('Should render %s ticks when domain={%s}', (length, domain, textContent) => {
~~~~~~

test/cartesian/YAxis.spec.tsx:48:69 - error TS7006: Parameter 'textContent' implicitly has an 'any' type.

48 ]).it('Should render %s ticks when domain={%s}', (length, domain, textContent) => {
~~~~~~~~~~~

test/cartesian/YAxis.spec.tsx:77:5 - error TS7006: Parameter 'domain' implicitly has an 'any' type.

77 domain => {
~~~~~~

test/shape/Rectangle.spec.tsx:2:18 - error TS2307: Cannot find module 'jest-each' or its corresponding type declarations.

2 import each from 'jest-each';
~~~~~~~~~~~

test/shape/Rectangle.spec.tsx:7:99 - error TS7006: Parameter 'radius' implicitly has an 'any' type.

7 each([[5, 10, 8, 15], 5]).it('Should render 1 rectangle in simple Rectangle when radius is %s', radius => {
~~~~~~

Found 7 errors.

[akamfoad]

so @morozovkirill a few action items on this:

1. Remove unsafe spreading of `yAxis` here (check for existence first) - even when checking for `yAxis` first make sure to add an optional on `ticks`

2. Add some more type safety to `getTicksOfAxis` - right now `ticks` is of type `any` which allows us to do unsafe access

@ckifer
#3912 should fix point 1

[ckifer]

@morozovkirill not sure about your build issues. Looks like you just need to run npm install though

[ckifer]

Released fix in 2.9.1, resolving