Show specific chart on fullScreen mode when click on button

[Dhanashri Tak]

I am not able to find any property or method for fullscreen mode for specific chart.

Scenario: On chart menu is available. when user select option for full screen then it should display specific chart on full screen mode then on menu there should be option exit full screen mode so it should be resize to normal mode.

Please check attachment for reference.

[Durga Gopalakrishnan]

Hi Dhanashri, 

We suggest you to use menu select event to view the chart refresh method to view chart in full screen and also in specific size. We have rendered chart in 100% width when selecting View FullScreen option from menu and rendered in 60% width when selecting Exit FullScreen option. Please check with below snippet and screenshots. 

  public onSelect(args){ 

        if(args.item.properties.text == "View FullScreen"){ 

            this.chart.width = "100%"; 

            this.chart.refresh(); 

            this.menu.close(); 

        } 

        if(args.item.properties.text == "Exit FullScreen"){ 

            this.chart.width = "60%"; 

            this.chart.refresh(); 

            this.menu.close(); 

        } 

    } 

View FullScreen 

 

Exit FullScreen 

 

Sample : https://stackblitz.com/edit/angular-rk6rqe 

Kindly revert us if you have any concerns. 

Regards, 

Durga G 

[Dhanashri Tak]

Hi Gopalakrishnan,

Thanks for your response, but it is not working as expected.

When user click on "view full screen" button then it will show that chart on entire screen on windows.

please refer screenshot for better understanding.

Demo Example: 

https://highcharts-angular-basic-line-abnznx.stackblitz.io/

https://stackblitz.com/edit/highcharts-angular-basic-line-abnznx?file=src/app/app.component.ts

Like this highchart fullscreen functionality i am expecting in syncfusion.

[Durga Gopalakrishnan]

Hi Dhanashri, 

We suggest you to use requestFullscreen method to display full screen and exitFullscreen method to exit the full screen. We have modified sample and attached for your reference.  

public onSelect(args){ 

        var chartEle = document.getElementById("defaultSample"); 

        if(args.item.properties.text == "View FullScreen"){             

            chartEle.requestFullscreen(); 

        } 

        if(args.item.properties.text == "Exit FullScreen"){ 

            document.exitFullscreen(); 

        } 

    } 

Sample : https://stackblitz.com/edit/angular-rk6rqe-mvjn5s 

Kindly revert us if you have any concerns. 

Regards, 

Durga G 

[Dhanashri Tak]

Hi  Gopalakrishnan,

                          Thanks  now it works as expected

[Durga Gopalakrishnan]

Hi Dhanashri, 

Most welcome. Please get back to us if you need any further assistance. We are always happy in assisting you. 

Regards, 

Durga G

[Dhanashri Tak]

Hi,

If we click on hamburger menu then it opens. And after selection of any value it close the menu. But if i open the menu using hamburger and remove mouse hover from menu then it should close automatically.

Example : https://ej2.syncfusion.com/angular/documentation/menu/use-case-scenarios/ In this syncfusion example it opens and close on hover of mouse but they are using simple menu but we want Same behavior using hamburger .

Sample program - https://stackblitz.com/edit/angular-rk6rqe?file=app.component.ts

Expected : ​ please refer below reference link,

Reference: https://stackblitz.com/edit/highcharts-angular-example. In this highchart example after clicking on menu if we remove mouse hover then it closes automatically

can you please provide solution ASAP?

[Durga Gopalakrishnan]

Hi Dhanashri, 

We are validating the reported scenario. We will check this and update further details within one business day(24^th August, 2021). We appreciate your patience until then. 

Regards,  

Durga G

[Durga Gopalakrishnan]

Hi Dhanashri, 

Thanks for being patience. We have checked your reported query. We can achieve your requirement by using the addEventListener in created event of Menu. Please check the below code snippet.  

<div id="defaultSample" class="control-section">  

  <div align='center' class="overlay">  

    <ejs-menu #menu hamburgerMode='true' showItemOnClick="false" title="" (select)="onSelect($event)"  

      [items]='menuItems' (created)="created($event)"></ejs-menu>  

  </div>  

  <div align='center'>   

    <ejs-chart #chart width=" 60%" [primaryXAxis]='xAxis' [primaryYAxis]='yAxis' [title]='chartTitle'  

      [tooltip]='tooltipSettings' [legendSettings]='legend'>  

      <e-series-collection>  

        <e-series [dataSource]='data' type='Bar' xName='month' yName='sales' name='Sales' [marker]='markerSettings'>  

        </e-series>  

      </e-series-collection>  

    </ejs-chart>  

  </div>  

</div>  

<style>  

  .overlay {   

    position: absolute;   

    width: 20%;   

    height: 5%;   

    font-size: 10px;   

    z-index: 1;   

    margin-top: 10px;   

  }  

</style>  

 public created(args) {  

    document  

      .getElementById('defaultSample')  

      .addEventListener('click', this.closeMenu.bind(this));  

  }   

  public closeMenu() {  

    this.menu.close();  

  }  

For your convenience, we have prepared a sample based on this. Please check the below sample link.  

Sample : https://stackblitz.com/edit/angular-rk6rqe-ms77av?file=app.component.ts 

Please check the above link and get back to us, if you need further assistance.  

Regards,  

Durga G

[Dhanashri Tak]

Hi   Gopalakrishnan ,

              Thanks for your response, but if I have multiple charts on one page then it is not working properly.

Example:  if i am using different id for different div and chart then it is not working properly 

<div id="defaultSample" class="control-section">

  <div align='center' class="overlay">

    <ejs-menu #menu hamburgerMode='true' showItamOnClick="false" title="" (select)="onSelect($event)"

      [items]='menuItems' (created)="created($event)"></ejs-menu>

  </div>

  <div align='center'>

    <ejs-chart #chart width=" 60%" [primaryXAxis]='xAxis' [primaryYAxis]='yAxis' [title]='chartTitle'

      [tooltip]='tooltipSettings' [legendSettings]='legend'>

      <e-series-collection>

        <e-series [dataSource]='data' type='Bar' xName='month' yName='sales' name='Sales' [marker]='markerSettings'>

        </e-series>

      </e-series-collection>

    </ejs-chart>

  </div>

</div>

<div id="defaultSample1" class="control-section">

<div align='center' class="overlay">

  <ejs-menu #menu hamburgerMode='true' showItamOnClick="false" title="" (select)="onSelect($event)"

    [items]='menuItems' (created)="created($event)"></ejs-menu>

</div>

<div align='center'>

  <ejs-chart #chart width=" 60%" [primaryXAxis]='xAxis' [primaryYAxis]='yAxis' [title]='chartTitle'

    [tooltip]='tooltipSettings' [legendSettings]='legend'>

    <e-series-collection>

      <e-series [dataSource]='data' type='Bar' xName='month' yName='sales' name='Sales' [marker]='markerSettings'>

      </e-series>

    </e-series-collection>

  </ejs-chart>

</div>

</div>

[Durga Gopalakrishnan]

Hi Dhanashri, 

We have validated your reported scenario with attached snippet. We request you to create a separate instances for both menu bar and chart and use the required events and methods to work with multiple charts. We have modified sample and attached for your reference. 

<div id="defaultSample" class="control-section" style="border: 2px solid red"></div> 

<div id="defaultSample1" class="control-section" style="border: 2px solid red"></div> 

public created(args) { 

    document 

      .getElementById('defaultSample') 

      .addEventListener('click', this.closeMenu.bind(this)); 

  } 

  public created1(args) { 

    document 

      .getElementById('defaultSample1') 

      .addEventListener('click', this.closeMenu1.bind(this)); 

  } 

  public closeMenu() { 

    this.menu.close(); 

  } 

  public closeMenu1() { 

    this.menu1.close(); 

  } 

Sample : https://stackblitz.com/edit/angular-rk6rqe-yj4zzd 

Please revert us if you have any concerns. 

Regards, 

Durga G