How to define a custom class to HighchartsReact component

Question

I am using HighchartsReact to render some pie charts and I need to add custom css to it.

Without react I used the id of the div to style <div id="something"></div>

But now in react I am using something like:

  <HighchartsReact
    highcharts={Highcharts}
    options={options}
  />

How do I add a custom class to this?

I tried

  <HighchartsReact
    highcharts={Highcharts}
    options={options}
    className="test-class"
  />

But it did not work.

I referenced this doc: https://www.highcharts.com/blog/post/highcharts-wrapper-for-react-101/

Answer 1

I figured it out.

The highchartsReact has a containerProps prop that you can use to give a custom class. Something like:

<HighchartsReact
  highcharts={Highcharts}
  containerProps={{ className: "test-class" }}
  options={options}
/>

also more info here: https://www.npmjs.com/package/highcharts-react-official