highcharts: can't convert null to object error

[jccgadam]

Hi guys: I really need some help. i am trying to use hightchart for my react app, but I always get error below.

Uncaught TypeError: can't convert null to object
    at trim (matchmedia.js:26)
    at matchmedia.js:26
    at t (highcharts.js:10)
    at e.Chart.getContainer (highcharts.js:284)
    at e.Chart.firstRender (highcharts.js:301)
    at e.Chart.<anonymous> (highcharts.js:273)
    at e.fireEvent (highcharts.js:30)
    at e.Chart.init (highcharts.js:272)
    at e.Chart.getArgs (highcharts.js:272)
    at new e.Chart (highcharts.js:271)

React App library version: "highcharts-react-official": "^2.2.2", "highcharts": "^7.2.1", "react": "16.4.1", Env: node 8.16.2 npm 6.4.1

i tried to pass most basic configuration and data like [1,2,3] but still have this error. Any help is appreciate

Thanks a lot

[ppotaczek]

Hi @jccgadam,

Thank you for using Highcharts!

Could you reproduce that problem in some online code editor or add compressed project here?

Best regards!

[ppotaczek]

Closed due to inactivity.

[tutan1989]

Same code is working in my local environment but when I deployed in dev server then its giving me that error.... Pleas help.

Snippet: return (

)

[ppotaczek]

Hi @tutan1989, Please provide more information about the problem. It would be best if you could reproduce the issue in a minimal example.

[tutan1989]

I am using highcharts in one of my component. My code is running perfectly in local. But when I deploy same code in dev server its not working though I am getting the data from my api.

Error is shown in above photo.

My react code is in above photos.

Above photo shows data i got from api, its having all the data.

I have declared 5 stated as utilization, overUtilization, availability, hours and empNames. Out of these 5 states empNames is array of string and rest are int of array data I am receiving from api. After fetching the api data I trying to set all these state with their respective data but only empNames state is able set data and for rest its telling undefined though data is there in the response. And throwing the error as first pic .

And same code is running fine in my local. You can refer below pic from local environment.

I am not getting where I am doing wrong ... please help... Thanks in advance

[ppotaczek]

Thanks for providing the details.

Which Highcharts version do you use? Also, please use this simple live example: https://codesandbox.io/s/highcharts-react-demo-forked-gbg3n and add your component with mocked data with the same structure as yours and provide me with a link to it.

[tutan1989]

Versions- Highcharts- 11.1.0 Highchart-react-official- 3.2.0

[tutan1989]

Please help me

[ppotaczek]

Hi @tutan1989, I'm sorry, but I still don't have enough information to reproduce the problem. Please share how you build and use your chart options.

[santoshaurus]

@ppotaczek I am also facing the same issue. Could you please help me with it?

The details are as follows:

Code:

import React, { useEffect, useRef } from "react";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";

require("highcharts/modules/wordcloud.js")(Highcharts);

const wordcloud = [
  { keyword: 'Aatman', score: 250 },
  { keyword: 'Aurus', score: 340 },
  { keyword: 'Store Place', score: 90 },
];

const WordCloudChart = () => {
  // const chartComponent = useRef(null);
  const options = {
    series: [{
      turboThreshold: 0,
      type: "wordcloud",
      data: wordcloud,
      name: "Score",
      minFontSize: 9,
    }],
    plotOptions: {
      series: { animation: false, cursor: "pointer", minFontSize: 10 },
      wordcloud: { rotation: { from: 0, orientations: 1, to: 0 } },
    },
    title: { text: "" },
    chart: { margin: 20, animation: false },
    credits: { enabled: false },
  };

  // useEffect(() => {
  //   chartComponent.current.chart.reflow();
  // }, []);

  return (
    <HighchartsReact
      highcharts={Highcharts}
      constructorType="chart"
      options={options}
    />
  );
};

export default WordCloudChart;

package.json

    "highcharts": "^11.1.0",
    "highcharts-react-official": "^3.2.1",
    "jquery": "^3.7.0",
    "latest-version": "^7.0.0",
    "perfect-scrollbar": "^1.4.0",
    "popper.js": "^1.16.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-loader-spinner": "^5.3.4",
    "react-router-dom": "^6.13.0",
    "react-scripts": "^2.1.3",
    "ti-icons": "^0.1.2",
    "wordcloud": "^1.2.2"

Error on

Thank You.

[ppotaczek]

Hi @santoshaurus,

Than you for contacting us! You need to adapt your data to the structure required by Highcharts, so use name and weight data properties instead of keyword and score.

Live demo: https://codesandbox.io/s/highcharts-react-5rz5pr?file=/demo.jsx API Reference: https://api.highcharts.com/highcharts/series.wordcloud.data

Best regards!

[santoshaurus]

@ppotaczek Thank you, it works for me.

[Harshini-inmobi]

I encountered a similar issue with the error:

Uncaught TypeError: Cannot convert undefined or null to object,

even when trying to render a simple bar graph. My current setup is

"highcharts": "11.1.0",
 "highcharts-react-official": "^3.2.1",
 "react": "16.14.0",
 Env:
 node: 14.17

My issue got resolved by downgrading the highcharts to "10.3.3" version.

[ppotaczek]

Hi @Harshini-inmobi, Could you adapt this simple live example: https://codesandbox.io/s/highcharts-react-demo-48zl6m to present the issue? Everything seems to work fine in version 11.1.0. Best regards!