0

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.

Bernardo Marques
  • 925
  • 2
  • 10
  • 33

1 Answers1

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

ppotaczek
  • 36,341
  • 2
  • 14
  • 24
  • I'm running: highcharts: 8.0.0 and highcharts-react-official: 3.0.0 on my local application. Adding the `containerProps={{ className: "chart" }}` made the navigation arrows appear but I can't interact with them. CodeSandBox application seems to work but the arrows icons don't show. – Bernardo Marques Mar 18 '20 at 14:51
  • Hi @Bernardo Marques, Could you reproduce that in the online code editor or send me a package with your project? – ppotaczek Mar 18 '20 at 15:07
  • I'm running a logic for double click on `Legend Click Event` that was breaking single click for that event (That I was able to handle as a condition inside double click). But as far as I was concerned this double click event wouldn't affect other click events. – Bernardo Marques Mar 18 '20 at 15:22
  • I have just noticed that adding `containerProps={{ className: "chart" }}` hides the legend. Is that expected? – Bernardo Marques Mar 18 '20 at 15:33
  • @Bernardo Marques - The legend should work correctly: https://codesandbox.io/s/pie-chart-jc8ir – ppotaczek Mar 18 '20 at 15:37