wildace
Posts: 9
Joined: Thu Oct 07, 2021 6:58 pm

Print Chart Change Page Layout in Application

Hi,

We are using the bubble chart in our application and seeing a weird issue.

We have a tab component build by ourselves which only shows a navigation arrow icon on the side when there is more tabs than the tab container can hold. It does this by calculating the width of all tabs and comparing that against the width of the tab container.

In one of the tab we have this long bubble chart and whenever I use the print chart option from the context menu, it will open up the preview in the same browser tab with only the chart. Once I close the preview, it goes back to my original page and it triggers the navigation arrow on our own tab component even I only has one tab.

If I move the print preview to a new browser tab than it would not trigger our navigation arrow on tab. However, by move the preview to a new tab will causing the chart to be cutoff (since it is pretty long) without any resizing like it will have in the same browser tab

Here is the code I used to open preview in a new tab:

Code: Select all

exporting: {
            menuItemDefinitions: {
                printChart: {
                    onclick: function() {
                        var divToPrint = document.getElementById('bubbleChartId');
                        var newWin = window.open();
                        newWin.document.write(divToPrint.innerHTML);
                        newWin.document.close();
                        newWin.focus();
                        newWin.print();
                        newWin.close();
                   }
              }
    }     
 
Is this chart preview changing other layout behavior a known issue?
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Print Chart Change Page Layout in Application

Hi,
Thnaks for your question and welcome at the our forum.

The options you are trying to set are unlikely to work because they were written to change the definition of a menu item in a context menu.
What exactly do you want to do can you briefly explain?

Note from our documentation:
An object consisting of definitions for the menu items in the context menu.
https://api.highcharts.com/highcharts/e ... efinitions

I reproduced your example at online code editor:
https://jsfiddle.net/BlackLabel/o19by4tv/

Let me know if you have more questions.
Best regards.
Sebastian Hajdus
Highcharts Developer
wildace
Posts: 9
Joined: Thu Oct 07, 2021 6:58 pm

Re: Print Chart Change Page Layout in Application

Hi @sebastian.h,

Thank you for the reply.

The main issue I'm experiencing is with the default print chart behavior's preview change the page layout (seems like some css change when preview opened in same browser tab) on our app which triggers some display bug on our own tab component (i.e. the navigation arrow on the component should only show if there is more tab than the tab container can hold, but after chart preview on same browser tab it is showing the navigation arrow even when I have only one tab)

The code snippet I provided is more like trying to find a workaround to resolve the display issue as if I open the preview in a new browser tab the display bug will not occur.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Print Chart Change Page Layout in Application

Hi,

I didn't found any strange behaviour like adding extra CSS styles after using export printChart.

You can try to report this like bug in our GitHub tickets, please describe the problem so that it can be reproduced:
https://github.com/highcharts/highchart ... new/choose

Best regards.
Sebastian Hajdus
Highcharts Developer
wildace
Posts: 9
Joined: Thu Oct 07, 2021 6:58 pm

Re: Print Chart Change Page Layout in Application

Hi @sebastian.h,

Can you kindly point me to the default print chart code in the Github? Trying to see how the native code is trying to achieve it and see if I'm doing anything wrong.

If I can't figure out, then I'll open a bug report.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Print Chart Change Page Layout in Application

Hi,

Have look at the source of exporting.src.js
https://code.highcharts.com/modules/exporting.src.js

Code: Select all

            function print() {
                var chart = this;
                if (chart.isPrinting) { // block the button while in printing mode
                    return;
                }
                printingChart = chart;
                if (!G.isSafari) {
                    chart.beforePrint();
                }
                // Give the browser time to draw WebGL content, an issue that randomly
                // appears (at least) in Chrome ~67 on the Mac (#8708).
                setTimeout(function () {
                    win.focus(); // #1510
                    win.print();
                    // allow the browser to prepare before reverting
                    if (!G.isSafari) {
                        setTimeout(function () {
                            chart.afterPrint();
                        }, 1000);
                    }
                }, 1);
            }

Best regards!
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Usage”