CODEWITHSUNDEEP
reactjstypescripthighcharts
Mr. Robot
Mr. Robot

Reputation: 1824

How can I add a full screen button in HighchartsReact?

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

Upvotes: 0

Views: 1461

Answers (2)

user14361391
user14361391

Reputation:

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;

Upvotes: 4

ppotaczek
ppotaczek

Reputation: 39109

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

Upvotes: 1

Related Questions