React - Highcharts Full Screen black bar

Question

I'm trying to implement an application using highcharts/highstock and I'm facing a problem trying to use the full screen function.

I need to set a fixed hight to my charts and be able to view each chart from my page as a full screen one, but since the height is fixed it stays the same when full screen loads, I've tried the approach from this post but it's not working, if I set height to 100% the chart overflows the page and gets crooped depending on the aspect ratio of the screen.

I´ve also found this working demo, I can't replicate this one. I'm not sure how he's calling the component, also I don't know how the export module (hamburguer menu) is showing up if it's never called.

render() {
    return <div className="chart" ref={ref => this.container = ref} />
  }

on my application I'm calling the component this way

render() {
  return (
    <HighchartsReact
      highcharts={Highcharts}
      constructorType="stockChart"
      options={options}
      allowChartUpdate
      callback={this.afterChartCreated}
    />
  )
}

I tried passing an ID to this element to try to set height via CSS but it doesn't work.

I was trying to replicate my application with a working example, I could only do it on a codesandbox because of import structure, but for some reason full screen is not working there, it prompts this message

Full screen is not supported inside a frame.

score 1 · Accepted Answer · answered Apr 14 '20 at 15:21

This demo creates the chart without using Highcharts React wrapper - it's a combination of pure Highcharts JS and React - that's why export menu shows without called it. The Highcharts React wrappers work similarly, but more in 'React way' and gives other opportunities to manage the component.

Back to your issue - I think that a better approach will be defining the height of the Highcharts component as inline React styling. You can achieve by setting it in containerProps object.

    <CardContent style={{ padding: 0 }}>
      <HighchartsReact
        highcharts={Highcharts}
        containerProps={{ style: { height: "400px" } }}
        options={options}
        allowChartUpdate
      />
    </CardContent>

Demo: https://codesandbox.io/s/fix-full-screen-253sq?file=/src/CustomGUIChart.js

To test it use the open in new window codesandbox option (button just above the exporting menu hamburger).

React - Highcharts Full Screen black bar

1 Answers1