Brush Error: Cannot read property 'range' of undefined

[avindra]

This is a continuation of Issue #1187 . This issue was re-filed as requested by @xile611 . Thanks to @ZephD for creating the error repro case.

Reproduction link

Steps to reproduce

Open the code sandbox, then resize the preview window pane

What is expected?

It should continue rendering normally

What is actually happening?

The code crashes, throwing this error:

Cannot read property 'range' of undefined
Brush.UNSAFE_componentWillReceiveProps
https://gqjm4.csb.app/node_modules/recharts/lib/cartesian/Brush.js:158:20
callComponentWillReceiveProps
https://gqjm4.csb.app/node_modules/react-dom/cjs/react-dom.development.js:12976:14
updateClassInstance
https://gqjm4.csb.app/node_modules/react-dom/cjs/react-dom.development.js:13178:7
updateClassComponent
https://gqjm4.csb.app/node_modules/react-dom/cjs/react-dom.development.js:17107:20
beginWork
https://gqjm4.csb.app/node_modules/react-dom/cjs/react-dom.development.js:18620:16
HTMLUnknownElement.callCallback
https://gqjm4.csb.app/node_modules/react-dom/cjs/react-dom.development.js:188:14
Object.invokeGuardedCallbackDev
https://gqjm4.csb.app/node_modules/react-dom/cjs/react-dom.development.js:237:16
invokeGuardedCallback
https://gqjm4.csb.app/node_modules/react-dom/cjs/react-dom.development.js:292:31
beginWork$1
https://gqjm4.csb.app/node_modules/react-dom/cjs/react-dom.development.js:23203:7
performUnitOfWork

Environment	Info
Recharts	v2.0.0-beta.5
React	16
System	Linux
Browser	Chrome 80

---

[avindra]

Thanks for the fix @xile611 , can confirm it works great in v2 beta 6

[NereonNeo]

Error: Cannot read properties of undefined (reading 'name')

Hi everyone! I'm not sure if this will be useful to anyone, but I wanted to share how I solved a similar error.

The issue was that when the data in the Brush component changed, it would completely break and throw an error (Cannot read properties of undefined (reading 'name')). I understood that this error was occurring because the new data might have had fewer elements, causing it to fail when trying to access properties using the old indices. However, I couldn't figure out how to resolve it! Out of desperation, I dove into the Brush component's code and found an interesting snippet:

var ariaLabelBrush = ariaLabel || "Min value: ".concat(data[startIndex].name, ", Max value: ").concat(data[endIndex].name);
it seemed to be expecting ariaLabel, which was odd because there's no mention of ariaLabel in the Recharts Brush documentation (https://recharts.org/en-US/api/Brush).

In the end, I provided ariaLabel to the Brush component, and everything started working!

ariaLabel="Brush"

Here's the full code:

<Brush
  data={data}
  className={cn("brush-custom translate-y-2")}
  padding={{
    left: 5,
    right: 5,
    top: 5,
    bottom: 5,
  }}
  tickFormatter={() => ""}
  height={47}
  alwaysShowText={false}
  traveller={customTraveller}
  travellerWidth={0}
  ariaLabel="Brush"
  onChange={updateBrushIndex}
  startIndex={brushIndex.startIndex}
  endIndex={brushIndex.endIndex}
>
  <BarChart barCategoryGap={0} barGap={0} data={data} barSize={20}>
    {barChartConfig.map(renderBarChartSecond)}
  </BarChart>
</Brush>

I will be glad if this helps someone =) Good luck!

[ckifer]

The reason for it not being in the docs is the same as the other implicit props - recharts passes all applicable SVG properties down to the element. It's a hard thing to document, but we'll try to make it better somehow.

Anyways, that needs guarded against! It shouldn't matter if you pass your own label or not. And if you update data, the indices should update too. It's just trying to generate a reasonable label from the data when there isn't one passed

[ckifer]

@NereonNeo may I ask why you pass data directly to Brush and don't rely on data to be passed down from the parent chart?

I ask this because in 3.x we're removing data as a public property from Brush - ideally you are brushing a chart and that chart has the same data as the Brush.

Or was that just for the example?

[ckifer]

Added optional chaining to that property access in v2.12.7, shouldn't be an issue anymore

[NereonNeo]

@NereonNeo may I ask why you pass data directly to Brush and don't rely on data to be passed down from the parent chart?

I ask this because in 3.x we're removing data as a public property from Brush - ideally you are brushing a chart and that chart has the same data as the Brush.

Or was that just for the example?

Hey @ckifer I didn’t notice this, thanks for the warning 🙏, I’ll fix it