CODEWITHSUNDEEP
javascriptangularhighchartsfullscreen
The Hungry Dictator
The Hungry Dictator

Reputation: 3484

Fullscreen functionality on saperate html button for highchart in angular

Hello I have been looking for the a full screen functionality for chart in highchart. I have been referring the site and got this link.

Here in javascript you can achieve this by simply handling click event like

document.getElementById('button').addEventListener('click', function () {
    chart.fullscreen.toggle();
});

I have tried the same thing for angular highcharts :

ngOnInit(){
  this.progressChart = Highcharts.chart(this.donutContainer.nativeElement, this.donutOptions, () => {
  /*
    Do things here after chart is drawn
  */
  }) 
}
onFullScreenClick(){
    this.progressChart.fullscreen.toggle()
}

But seems like this code is not working. I somewhere read you can also use toggleFullScreen(). But that is also not feasible.

Upvotes: 0

Views: 1413

Answers (1)

Mateusz Kornecki
Mateusz Kornecki

Reputation: 775

Fullscreen requires the fullscreen module, so if you did not imported and initialized that might be the reason.

import HC_fullscreen from 'highcharts/modules/full-screen.js';
HC_fullscreen(Highcharts);

I have prepared a simple demo for you to show you the possible solution. I am using the official highcharts-angular wrapper there (I am encouraging you to check it out, it might make your life easier while working with highcharts in angular), but the solution made without the wrapper should be similar.

Docs:
https://github.com/highcharts/highcharts-angular

Live demo: (note - the fullscreen will not work inside the stack-blitz frame, but the following example will work in the real-life project)
https://stackblitz.com/edit/highcharts-angular-basic-line-abnznx?file=src/app/app.component.ts

Upvotes: 1

Related Questions