Cannot solve uncaught TypeError when using highcharts-react wrapper to draw Venn diagrams

Question

I have saved 100 sets of Venn diagram data in a .json file, and I am using React, Highcharts, and the official highcharts-react wrapper, to let the user transition between each Venn diagram using a simple slider.

import data from "./data/venns.json";

import { useState } from "react";

import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";   
import vennModule from "highcharts/modules/venn";
vennModule(Highcharts);

function App() {

  const [userPercent, setUserPercent] = useState(1);

  const vennData = data[userPercent]; // ref the imported .json file

  const formattedVennData = [
    {
      sets: ["baseline"],
      value: vennData[5].size,
    },
    {
      sets: ["ours"],
      value: vennData[4].size,
    },
    {
      sets: ["optimal"],
      value: vennData[6].size,
    },
    {
      sets: ["baseline", "optimal"],
      value: vennData[3].size,
    },
    {
      sets: ["ours", "optimal"],
      value: vennData[1].size,
    },
    {
      sets: ["ours", "baseline"],
      value: vennData[0].size,
    },
    {
      sets: ["baseline", "ours", "optimal"],
      value: vennData[2].size,
    },
  ];

  return (
    <>
      <input
        type="range"
        min="1"
        max="100"
        defaultValue={userPercent}
        onChange={(e) => setUserPercent(+e.target.value)}
      />
      {userPercent}
      <Venn
        seriesData={formattedVennData}
      />
    </>
  );
}

function Venn(props) {

  const { seriesData } = props;

  const chartOptions = {
    series: [
      {
        type: "venn",
        data: seriesData,
      },
    ],
  };

  return (
    <>
      <HighchartsReact
        highcharts={Highcharts}
        options={chartOptions}
        // key={new Date().getTime()} // if used, forces component to be loaded from scratch
      />
    </>
  );
}

The above code is working as I expect, except at certain seemingly random points in the slider, I get a console error and I can't figure out what is causing it.

Uncaught TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at Object.draw (venn.src.js:601:21)
    at venn.src.js:1752:21
    at Array.forEach (<anonymous>)
    at b2.drawPoints (venn.src.js:1742:17)
    at a2.render (highcharts.src.js:38426:21)
    at a2.redraw (highcharts.src.js:38476:17)
    at highcharts.src.js:30979:25
    at Array.forEach (<anonymous>)
    at a2.redraw (highcharts.src.js:30977:17)

The above error occurred in the <ForwardRef> component:

    at http://localhost:5173/node_modules/.vite/deps/highcharts-react-official.js?v=5fa2073c:86:36
    at Venn (http://localhost:5173/src/App.tsx?t=1681816117656:287:13)
    at App (http://localhost:5173/src/App.tsx?t=1681816117656:26:43)

I know that it is not an issue with the data, because if I add key={new Date().getTime()} to the HighchartsReact component so it is loaded from scratch each time, every Venn diagram loads fine. However, if I do this, I lose the venn diagrams animating smoothly between each other, which is the whole point of the visualisation.

Does anyone know why the error is happening?

Answer 1

That is a bug in Highcharts core and it is reported here: https://github.com/highcharts/highcharts/issues/16946

For now, you can use one of the suggested workarounds, for example:

  const chartOptions = {
    plotOptions: {
      venn: { keys: [] }
    },
    series: [
      {
        type: "venn",
        data: seriesData
      }
    ]
  };

---

Live demo: https://codesandbox.io/s/highcharts-reactt-5hvve1

API Reference: https://api.highcharts.com/highcharts/chart.allowMutatingData