Skip to content
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 · 18 comments
Closed

print - cutted chart #2088

sebastianbochan opened this issue Aug 1, 2013 · 18 comments

Comments

@sebastianbochan
Copy link
Contributor

@sebastianbochan 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
Copy link

@rstaph 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
Copy link
Collaborator

@TorsteinHonsi 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
Copy link

@SuchitaAgarwal 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
Copy link

@SuchitaAgarwal 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
Copy link

@rstaph 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
Copy link

@SuchitaAgarwal 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
Copy link
Contributor Author

@sebastianbochan 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
Copy link

@ValentinH 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
Copy link

@ghost ghost commented Apr 16, 2015

Not closed, confused with issue number 2888

@ghost ghost reopened this Apr 16, 2015
@sebastianbochan
Copy link
Contributor Author

@sebastianbochan 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
Copy link

@rsarraillon 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
Copy link
Collaborator

@TorsteinHonsi 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
Copy link

@rsarraillon 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
Copy link
Collaborator

@TorsteinHonsi 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.

@nikhil-tayal
Copy link

@nikhil-tayal nikhil-tayal commented Jan 10, 2020

@media print{ svg { max-width: 90vw; } }

You can also add the ID for more specific CSS

@ps04639
Copy link

@ps04639 ps04639 commented Jun 9, 2020

@page {
  size: A4;
  margin-top: 9mm;
  margin-bottom: 8mm;
  margin-left: 2mm;
  margin-right: 2mm;
}
@media print {
  body {
    width: 780px;
    overflow: hidden;
  }
  #container {
    max-width: 780px;
  }
}

little add-on to the above answer/reply

@KarlBaumann
Copy link

@KarlBaumann KarlBaumann commented Jun 18, 2020

I think I might be having similar issue, but with height
image
Anyone ever experienced this?

@pawelfus
Copy link
Contributor

@pawelfus pawelfus commented Jun 19, 2020

Issue should be fixed @KarlBaumann - could you recreate the issue in jsFiddle? We will check this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
10 participants