New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

print - cutted chart #2088

Closed
sebastianbochan opened this Issue Aug 1, 2013 · 14 comments

Comments

Projects
None yet
6 participants
@sebastianbochan
Contributor

sebastianbochan commented Aug 1, 2013

Chart is cutted, when we try to print it.

http://jsfiddle.net/D8MJ9/1/show/ (and any examples from our webpage demo).

@rstaph

This comment has been minimized.

Show comment
Hide comment
@rstaph

rstaph Feb 6, 2014

Any news on a fix for this? I'm running into the same issue. When using the export feature "Print chart" the chart is extended off the right side of the page.

rstaph commented Feb 6, 2014

Any news on a fix for this? I'm running into the same issue. When using the export feature "Print chart" the chart is extended off the right side of the page.

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Feb 7, 2014

Collaborator

I've not tested this systematically across browsers and chart settings, but what about temporarily setting the chart's print width to something smaller, like 800px? You can try it out at http://jsfiddle.net/highcharts/jPBPA/show (see code at ttp://jsfiddle.net/highcharts/jPBPA/).

The actual workaround looks as follows:

    // Drop-in workaround for #2088
    Highcharts.wrap(Highcharts.Chart.prototype, 'print', function (proceed) {
        var chart = this,
            chartWidth = chart.chartWidth;
        this.setSize(800, chart.chartHeight, false);
        proceed.call(this);
        setTimeout(function () {
            chart.setSize(chartWidth, chart.chartHeight, false);
        }, 1000);
    });
    // End of drop-in workaround

What do you think about this? If implemented, it should be optional, something along the lines of exporting.sourceWidth.

Collaborator

TorsteinHonsi commented Feb 7, 2014

I've not tested this systematically across browsers and chart settings, but what about temporarily setting the chart's print width to something smaller, like 800px? You can try it out at http://jsfiddle.net/highcharts/jPBPA/show (see code at ttp://jsfiddle.net/highcharts/jPBPA/).

The actual workaround looks as follows:

    // Drop-in workaround for #2088
    Highcharts.wrap(Highcharts.Chart.prototype, 'print', function (proceed) {
        var chart = this,
            chartWidth = chart.chartWidth;
        this.setSize(800, chart.chartHeight, false);
        proceed.call(this);
        setTimeout(function () {
            chart.setSize(chartWidth, chart.chartHeight, false);
        }, 1000);
    });
    // End of drop-in workaround

What do you think about this? If implemented, it should be optional, something along the lines of exporting.sourceWidth.

@SuchitaAgarwal

This comment has been minimized.

Show comment
Hide comment
@SuchitaAgarwal

SuchitaAgarwal Aug 27, 2014

I tried the given workaround, but faced some issues.
Firstly the workaround is working fine in Chrome for our application.
In Mozilla, the given width of "800" is still wide, and the chart is still getting cut off. So, we can not use a hard coded width , we need a generic solution for all browsers.
Moreover in IE, it is giving javascript error, need to debug more on that.
But altogether, the workaround does not suits all our requirements. Please suggest some alternate.

SuchitaAgarwal commented Aug 27, 2014

I tried the given workaround, but faced some issues.
Firstly the workaround is working fine in Chrome for our application.
In Mozilla, the given width of "800" is still wide, and the chart is still getting cut off. So, we can not use a hard coded width , we need a generic solution for all browsers.
Moreover in IE, it is giving javascript error, need to debug more on that.
But altogether, the workaround does not suits all our requirements. Please suggest some alternate.

@SuchitaAgarwal

This comment has been minimized.

Show comment
Hide comment
@SuchitaAgarwal

SuchitaAgarwal Aug 29, 2014

After further digging into the problem, I found a much simpler solution.
It worked for us in all browsers, resolutions and multiple chart scenarios as well.
What I did was to call the setSize() function, within the print function provided by HighCharts in exporting.js.
capture

Let me know your suggestions, if this will work or not? Also if it will impact any other functionality.

SuchitaAgarwal commented Aug 29, 2014

After further digging into the problem, I found a much simpler solution.
It worked for us in all browsers, resolutions and multiple chart scenarios as well.
What I did was to call the setSize() function, within the print function provided by HighCharts in exporting.js.
capture

Let me know your suggestions, if this will work or not? Also if it will impact any other functionality.

@rstaph

This comment has been minimized.

Show comment
Hide comment
@rstaph

rstaph Aug 29, 2014

I have not tried your solution yet as I'm not near a real computer. The only issue I think might come up with that solution is that a chart you may want smaller than that will be enlarged. If that does happen I'd add a condition that if the size is > 700 to set it to 700.

rstaph commented Aug 29, 2014

I have not tried your solution yet as I'm not near a real computer. The only issue I think might come up with that solution is that a chart you may want smaller than that will be enlarged. If that does happen I'd add a condition that if the size is > 700 to set it to 700.

@SuchitaAgarwal

This comment has been minimized.

Show comment
Hide comment
@SuchitaAgarwal

SuchitaAgarwal Sep 2, 2014

Yes, in that case it will cause a problem.
We can add a check for that as you mentioned.
Also we can make it dynamic by adding a property like "printWidth" and set its value while setting high charts options, and then use it here like chart.setSize(printWidth, chart.chartHeight, false);

SuchitaAgarwal commented Sep 2, 2014

Yes, in that case it will cause a problem.
We can add a check for that as you mentioned.
Also we can make it dynamic by adding a property like "printWidth" and set its value while setting high charts options, and then use it here like chart.setSize(printWidth, chart.chartHeight, false);

@sebastianbochan

This comment has been minimized.

Show comment
Hide comment
@sebastianbochan

sebastianbochan Sep 16, 2014

Contributor

The problem also appears with the highmaps: http://jsfiddle.net/5u6z7csf/1/
(print option)

Chrome: 37.0.2062.120

Contributor

sebastianbochan commented Sep 16, 2014

The problem also appears with the highmaps: http://jsfiddle.net/5u6z7csf/1/
(print option)

Chrome: 37.0.2062.120

@ValentinH

This comment has been minimized.

Show comment
Hide comment
@ValentinH

ValentinH Jan 15, 2015

@highslide-software 's and @SuchitaAgarwal 's solutions work well in my browser (chrome), but I found an issue with it:

  • once you have printed the chart and came back to the browser view, if you resize the window, the chart is not resized anymore!

What could be the reason? As far as I understand, it is because the autoresizing works when the chart has no size, so, in this example, how to reset the chart size to no value to get it autoresized to it's parent?

Here is an updated fiddle since the one provided by @highslide-software was not working anymore (height parameter nul in setSize).

[edit]: This update uses chart.hasUserSize = null; which makes the auto-width work again.

ValentinH commented Jan 15, 2015

@highslide-software 's and @SuchitaAgarwal 's solutions work well in my browser (chrome), but I found an issue with it:

  • once you have printed the chart and came back to the browser view, if you resize the window, the chart is not resized anymore!

What could be the reason? As far as I understand, it is because the autoresizing works when the chart has no size, so, in this example, how to reset the chart size to no value to get it autoresized to it's parent?

Here is an updated fiddle since the one provided by @highslide-software was not working anymore (height parameter nul in setSize).

[edit]: This update uses chart.hasUserSize = null; which makes the auto-width work again.

@ghost ghost closed this in f632d56 Apr 16, 2015

ghost pushed a commit that referenced this issue Apr 16, 2015

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Apr 16, 2015

Not closed, confused with issue number 2888

ghost commented Apr 16, 2015

Not closed, confused with issue number 2888

@ghost ghost reopened this Apr 16, 2015

@sebastianbochan

This comment has been minimized.

Show comment
Hide comment
@sebastianbochan

sebastianbochan Oct 6, 2015

Contributor

The problem is also when we click ctrl+p or use pritn option in browser.

Workaround for ctrl+p
http://jsfiddle.net/w4ro5xb7/54/

Contributor

sebastianbochan commented Oct 6, 2015

The problem is also when we click ctrl+p or use pritn option in browser.

Workaround for ctrl+p
http://jsfiddle.net/w4ro5xb7/54/

@rsarraillon

This comment has been minimized.

Show comment
Hide comment
@rsarraillon

rsarraillon Apr 27, 2016

I'd like to know if you have planned to fix this bug #2088 sooner because it's important for us. thanks for your answer.

rsarraillon commented Apr 27, 2016

I'd like to know if you have planned to fix this bug #2088 sooner because it's important for us. thanks for your answer.

TorsteinHonsi added a commit that referenced this issue Apr 28, 2016

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Apr 28, 2016

Collaborator

Thanks for writing! In the commit above I suggested a new option, exporting.maxPrintWidth that defaults to 780. It seems to solve the problem across browsers. If the chart is wider than this width, it will be shrinked on print.

Please test the new feature at http://jsfiddle.net/highcharts/D8MJ9/3/show/.

What do you think?

Collaborator

TorsteinHonsi commented Apr 28, 2016

Thanks for writing! In the commit above I suggested a new option, exporting.maxPrintWidth that defaults to 780. It seems to solve the problem across browsers. If the chart is wider than this width, it will be shrinked on print.

Please test the new feature at http://jsfiddle.net/highcharts/D8MJ9/3/show/.

What do you think?

@rsarraillon

This comment has been minimized.

Show comment
Hide comment
@rsarraillon

rsarraillon May 2, 2016

Hi Torstein,

No, it doesn't fit my need, it only work when you are printing highcharts (one or many), in my page I have a lot of other option to prints like filters and company brand and etc, so this solution won't fix my problem, I want to use browser print button, and see un-cutted chart.

It’s why I wanted to know when do you think resolve the bug #2008.

Best Regards

rsarraillon commented May 2, 2016

Hi Torstein,

No, it doesn't fit my need, it only work when you are printing highcharts (one or many), in my page I have a lot of other option to prints like filters and company brand and etc, so this solution won't fix my problem, I want to use browser print button, and see un-cutted chart.

It’s why I wanted to know when do you think resolve the bug #2008.

Best Regards

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi May 2, 2016

Collaborator

Okay, there are two different issues here, it's Chart.print() and there is general page print, that is related to #2284. Currently there doesn't seem to be a good cross-browser solution to that.

Collaborator

TorsteinHonsi commented May 2, 2016

Okay, there are two different issues here, it's Chart.print() and there is general page print, that is related to #2284. Currently there doesn't seem to be a good cross-browser solution to that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment