Navigation arrows for Stock Tools

Question

I'm trying to implement navigation arrows for stock tools using Highcharts/Highstock with the React wrapper. This is a working example for a non React application.

My attempt with React is here . I couldn't find any documentation about those arrows. Comparing the codes, the only diference is that chart options are wrapped on a container on the first example, but I couldn't replicate that on React.

Also, I can't find anything on documentation related to stock tools positioning on chart (bottom/top/right/left) or how to handle the minimize arrow for it. Is the only solution via CSS?

Any tips on how to implement that?

---

Update

I Have added

<HighchartsReact
  ...
  containerProps={{ className: "chart" }}
/>

to my updated example, and also updated dependencies. Now everything is working fine.

Answer 1

You have used Highcharts v7.0.3, since v7.1.3 the problem with arrow icons seems to be resolved. Additionally, add chart class name to get the proper height for stock tools.

<HighchartsReact
  ...
  containerProps={{ className: "chart" }}
/>

---

Live demo: https://codesandbox.io/s/pie-chart-64hmo