How can I add a full screen button in HighchartsReact?

Question

I am using HighchartsReact and want to add a button that allows me to toggle full screen mode that is not in the exporting menu, like this.

I have found this help topic documentation but it appears I cannot access Highcharts.Chart.prototype.toggleFullscreen() method in HighchartsReact.

I have also found this that I can import:

import HighchartsFullscreen from 'highcharts/modules/full-screen';

But there does not seem to be any information on what it does anywhere on the internet.

I cannot find any other documentation on how to do this.

What is the correct way to handle this if at all possible?

Update

I have followed the example from the third comment below but am getting the error:

Uncaught TypeError: chart.current.chart.downloadSVG is not a function

Have a look at this: https://www.highcharts.com/forum/viewtopic.php?t=29073&__cf_chl_jschl_tk__=7b5ab811d9f2889616c3dbc230ac2ed1e2f67743-1579788781-0-AZyvZvpbQC2Ma3Ll9uw0nG1FVQrcBuqPIA25D0Sd8acog7AKU0TIMSF_P9QhsfHVgScRFCFWWks-9Yqo2tcOUl3bsDPIXN0AO2TfFplVSR_oe2KRvmjB78pM-frSK0IO7lAaK5rRIS9JBB5tqFe1ZT3NF5VhB4rP0-U6lN3RvuEkQIM15DXMm6wVWzwIRc9Iw9RbIyqu9e_Wz-gHP9TLY1dAEdx73yVPIU5L8r01ui-IDLERrsdZUMmkWZCEr-QRsWCkJUmH7B-CKmiOARZTWFytlOS_eV1xjh51St_HfK0jgL-Vnrqwz3NqkhVQnKgZBP2WhXbRUIhnU_berONsklkEtnB5heBRKcEcpb9g6Up2 — Scalpweb, Jan 23 '20 at 14:14
Ho ok ! Then maybe this: https://stackoverflow.com/questions/58098067/how-to-add-export-functionality-to-custom-button-in-react-highcharts — Scalpweb, Jan 23 '20 at 14:19

score 4 · Answer 1 · answered Jan 08 '21 at 15:00

HighCharts React - Export Button Customization / Adding a custom export button.

Here you go,

//HighCharts
import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'

require('highcharts/modules/exporting')(Highcharts);
require('highcharts/modules/export-data')(Highcharts);

const Chart = () =>
{
    const chart = useRef();

const exportHandler = (type) => 
  {
    if (chart && chart.current && chart.current.chart) 
    {
      switch (type) 
      {
        case "png":
          chart.current.chart.exportChart();
          break;

        case "jpeg":
          chart.current.chart.exportChart({type: 'image/jpeg'});
          break;

        case "svg":
          chart.current.chart.exportChart({type: 'image/svg+xml'});
          break;

        case "pdf":
          chart.current.chart.exportChart({type: 'application/pdf'});
          break;

        case "csv":
          chart.current.chart.downloadCSV();
          break;

        case "xls":
          chart.current.chart.downloadXLS();
          break;

        case "table":
          chart.current.chart.toggleDataTable();
          break;

        case "fullScreen":
          chart.current.chart.fullscreen.toggle()

          break;

        case "print":
          chart.current.chart.print();
          break;
      
        default:
          break;
      }      
    }
  };
    
    return(
     <>
        <HighchartsReact
          highcharts={Highcharts}

          ref={chart}
        />

     <button onClick = {() => exportHandler('png')}>Custom Export</buttnon
    </>
    )
}

export default Chart;

score 1 · Answer 2 · answered Jan 23 '20 at 17:53

1

You need to import the exporting module and call:

new Highcharts.FullScreen(chart.container);

Live example: http://jsfiddle.net/BlackLabel/6m4e8x0y/4766/

Example with React: https://codesandbox.io/s/highcharts-react-demo-lyd8z

answered Jan 23 '20 at 17:53

ppotaczek

36,341
2
14
24

1

Thanks very much for this and great to know it works! This is throwing errors for me - to begin with I am using a function component so I get the linter throwing `Do not use 'new' for side effects.eslint(no-new)` but I know that I just have to assign the new instantiation to a variable to fix this. Second, as I am using TypeScript I get `Property 'FullScreen' does not exist on type 'typeof import(".../node_modules/highcharts/highcharts")'.` Also `this` is obviously redundant too. Any ideas here? Thanks – Mr. Robot Jan 23 '20 at 18:20

How can I add a full screen button in HighchartsReact?

Update

2 Answers2