I am currently working on integrating highcharts/highstock into my application, and I have encountered an issue with the full screen functionality.
The challenge I am facing is setting a fixed height for my charts while also enabling the option to view each chart in full screen mode. When I try to go full screen, the fixed height remains the same, leading to display issues. I attempted the solution suggested in this post, but unfortunately, it did not work as expected. Setting the height to 100% resulted in the chart overflowing the page and being cropped based on the screen's aspect ratio.
I came across a demonstration that seems to be functional, but I am unable to replicate it successfully. I am unsure about how this individual is calling the component and displaying the export module (hamburger menu) without explicitly calling it.
render() {
return <div className="chart" ref={ref => this.container = ref} />
}
In my application, I am invoking the component like so:
render() {
return (
<HighchartsReact
highcharts={Highcharts}
constructorType="stockChart"
options={options}
allowChartUpdate
callback={this.afterChartCreated}
/>
)
}
I attempted assigning an ID to the element to set the height using CSS, but this approach did not yield the desired results.
While attempting to recreate my application with a functional example, I could only achieve it on CodeSandbox due to import structure limitations. However, I encountered an issue with the full screen feature and received the following message:
Full screen is not supported inside a frame.