CODEWITHSUNDEEP
javascriptreactjshighchartsreact-highcharts
Bernardo Marques
Bernardo Marques

Reputation: 1055

Navigation arrows for Stock Tools

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.

Upvotes: 0

Views: 165

Answers (1)

ppotaczek
ppotaczek

Reputation: 39139

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

Upvotes: 1

Related Questions