Highcharts w/React - rendering div not found in JSX

Question

I'm trying to use Highcharts with my web application, which is written in React. Highcharts is rendered via a div tag.

I'm rendering everything on my page (i.e. the panels, input fields, buttons, tables, dropdowns, etc) from my JSX file. When I try to stick a div tag into my JSX with an id or class to link it to the Highcharts JavaScript, I get an error message in my console (Highcharts error #13) that the rendering div is not found.

   render() {
     return ( <div>
      <div id="container"></div>
      </div>
       );
      }
     }

However, when I stick a div tag into my HTML with an id or class linking it to my Highcharts JavaScript, I can get the chart to show up on the page, but I want it inside my JSX so I can place it inside the panels, containers, etc I have in my JSX.

Isn't this a duplicate of http://stackoverflow.com/questions/43767804/creating-a-bar-chart-using-highcharts-with-react-getting-an-error-that-renderi ? — Paweł Fus, May 04 '17 at 15:33
Possible duplicate of [creating a bar chart using Highcharts with React - getting an error that rendering div isn't found](http://stackoverflow.com/questions/43767804/creating-a-bar-chart-using-highcharts-with-react-getting-an-error-that-renderi) — user3351605, May 12 '17 at 15:32

score 2 · Accepted Answer · answered May 05 '17 at 04:07

To answer my own question here, the problem was that the render function is called after highcharts attempts to look for the div. You can either put the chart rendering code in the componentDidMount() section, put a timer on it, or render the highcharts code directly using dangerouslySetInnerHTML.

Highcharts w/React - rendering div not found in JSX

1 Answers1