Chart.js: Responsive causes problem with print

[Baukereg]

I have a graph set to responsive so it will always cover the entire block container. But when I print the webpage (by using window.print()) the graph's size doesn't seem to update and it's too big for the page, although the container is resized to fit the page.

[etimberg]

Seems to still reproduce in v2

[natcohen]

Anything in the pipe to solve this issue? I have the the same problem for v2, why was it removed?

[etimberg]

@natcohen nothing is in the works to solve this. We don't really know what the problem is.

The version 2.x label doesn't exist anymore (since all issues are assumed to apply to v2 unless otherwise stated).

[natcohen]

@etimberg I have opened a stackoverflow question... Let me know if you need more details!

[etimberg]

So I looked into this a bit. Setting responsive: false somewhat improves things, but the chart looks really bad. The problem is likely that when you press print, no JS runs so we aren't able to re-render the chart at the changed resolution.

I don't even know how we could solve that if my theory is right. Some details here: http://stackoverflow.com/questions/7644628/execute-javascript-when-printing-page

The solution to provide a print button is actually a good idea. What you'd do is resize the chart, then trigger the print dialog. During that time, the JS would block. Once printing finishes, you'd need to reset the chart size back to the original values.

[etimberg]

Closing since there isn't anything we can do for this. The print action will need to be JS triggered so that the chart can resize beforehand

[tim-schilling]

This can be solved with the following code:

function beforePrint () {
  for (const id in Chart.instances) {
    Chart.instances[id].resize()
  }
}

if (window.matchMedia) {
  let mediaQueryList = window.matchMedia('print')
  mediaQueryList.addListener((mql) => {
    if (mql.matches) {
      beforePrint()
    }
  })
}

window.onbeforeprint = beforePrint

Basically hook into the print event and resize all of the charts.

[pavoni]

Thanks for the example @tim-schilling - really helpful.

[FrancYescO]

the solution from @tim-schilling seems not working on firefox :(

[tim-schilling]

@FrancYescO If the print event isn't firing, then research other similar events for firefox.

[FrancYescO]

@tim-schilling the print event is correctly firing,,, but the chart does not get resized in the print view :(

[Techn1x]

Just tried the solution above, event seems to fire correctly for all browsers, but the chart only gets resized correctly on Chrome.. on Edge/IE11/Firefox chart is still far too wide and gets cut off

[Techn1x]

@tim-schilling This was working well in Chrome, but looks like they have pushed and update and now it doesn't work on Chrome either.

[tim-schilling]

@Techn1x This is still working properly for my client.
Hmm, actually I can't tell anymore. Sorry, I don't think they are going to prioritize the fix for the time being.

[FrancYescO]

actually i solved in this manner, really shitty way but as i have only 2 chart canvas and have they occupy full width of my print page this just worked.

someone can try to use the same approach to calculate the right chart size.

                    var old;
                    window.onbeforeprint = function() {
                        $("canvas").each(function(instance){
                            old = $(this).width();
                            $(this).width("98vw");
                        })
                    }
                    window.onafterprint = function(){
                        $("canvas").each(function(instance){
                            $(this).width(old);
                        })
                    }

[diegoaguilef]

Hi,
For some reason, when it reaches the "for" block in onbeforeprint:

```
function beforePrint () {
var test = $('#test'), id;

  for (id in Chart.instances){
    test.append('<h4>id: '+id+'</h4>')
    Chart.instances[id].resize()
  }
}

```
it seems not to work, since it does not show the element added in the "append" with the id of the instances.

can someone help me, pls? :( im printing charts into PDFs