Adjust the size of a Highcharts chart before printing

Question

Adjust the size of a Highcharts chart before printing

I'm facing an issue with a chart that doesn't have a specified height or width.

My goal is to print the graph in a taller and larger size when I click on the print button. I attempted to use setSize() function, but since there are no original dimensions for the graph, I can't resize it properly and end up with an oversized graph. I also tried to duplicate the chart by changing the renderTo, width, and height attributes inside a different div, but unfortunately, I couldn't get it to work. I've spent several hours on this problem and now I'm feeling completely confused.

What should be my next steps to stretch the graph for printing without altering the original version?

Thank you for your assistance.

javascript jquery html css highcharts

Answer 1

Answer №1

Pawel's Fiddle is experiencing compatibility issues with IE, as the second setSize function is being executed before printing. To resolve this, a timeout needs to be set for the size adjustment to occur after the printing.

For a working solution, please refer to: http://jsfiddle.net/6hyfk/34/

$('#container').highcharts({
    series: [{
        data: [1, 2, 3]        
    }]
});

$("#b").click(function() {
    var chart = $('#container').highcharts();

    chart.setSize(200,500, false);
    chart.print();
    setTimeout(function() {
        chart.setSize(600,500, false);
    }, 1000);

});

Answer 2

Pawel's Fiddle is experiencing compatibility issues with IE, as the second setSize function is being executed before printing. To resolve this, a timeout needs to be set for the size adjustment to occur after the printing.

For a working solution, please refer to: http://jsfiddle.net/6hyfk/34/

$('#container').highcharts({
    series: [{
        data: [1, 2, 3]        
    }]
});

$("#b").click(function() {
    var chart = $('#container').highcharts();

    chart.setSize(200,500, false);
    chart.print();
    setTimeout(function() {
        chart.setSize(600,500, false);
    }, 1000);

});

Answer 3

Answer №2

Personally, I have had success with this solution. Take a look at the following example: http://jsfiddle.net/Fusher/6hyfk/6/

If you are encountering difficulties, it could be due to setting the size in the wrong place. It would be helpful if you could provide some code (even better if done through jsfiddle).

$('#container').highcharts({
    series: [{
        data: [1, 2, 3]        
    }]
});

$("#b").click(function() {
    var chart = $('#container').highcharts();

    chart.setSize(200,500, false);
    chart.print();
    chart.setSize(600,500, false)

});

Answer 4

Personally, I have had success with this solution. Take a look at the following example: http://jsfiddle.net/Fusher/6hyfk/6/

If you are encountering difficulties, it could be due to setting the size in the wrong place. It would be helpful if you could provide some code (even better if done through jsfiddle).

$('#container').highcharts({
    series: [{
        data: [1, 2, 3]        
    }]
});

$("#b").click(function() {
    var chart = $('#container').highcharts();

    chart.setSize(200,500, false);
    chart.print();
    chart.setSize(600,500, false)

});

Answer 5

Answer №3

Aside from the solutions provided by Pawel and Arthur, you can refer to this thread for restoring auto-resizing functionality.

I encountered a similar issue when dealing with printing an entire page that happened to include a highchart, rather than just printing a chart itself.

During my research, I discovered several helpful tips that may benefit future developers:

Retrieving current Chart size: To reset the chart after printing, you can capture and store the current size of the chart using chart.chartHeight or chart.chartWidth (where

var chart = $('#chart-container').highcharts();

)

Restoring auto-resizing after setting size: Once you have called setSize() after printing, the chart will no longer resize automatically if the window changes. You can address this by following the 'hack' outlined in this explanation: Is modifying chart.hasUserSize a bad idea after calling Chart.setSize()? This involves setting chart.hasUserSize = false;

Utilizing before and after print events: Details on handling these events can be found in this discussion: Do modern browsers support onbeforeprint / onafterprint HTML events?, where the answer is (in essence) yes, but necessitates using a combination of onbeforeprint events and the watchMedia eventHandler API.

Hopefully, this information proves beneficial to someone!

Answer 6

Aside from the solutions provided by Pawel and Arthur, you can refer to this thread for restoring auto-resizing functionality.

I encountered a similar issue when dealing with printing an entire page that happened to include a highchart, rather than just printing a chart itself.

During my research, I discovered several helpful tips that may benefit future developers:

Retrieving current Chart size: To reset the chart after printing, you can capture and store the current size of the chart using chart.chartHeight or chart.chartWidth (where

var chart = $('#chart-container').highcharts();

)

Restoring auto-resizing after setting size: Once you have called setSize() after printing, the chart will no longer resize automatically if the window changes. You can address this by following the 'hack' outlined in this explanation: Is modifying chart.hasUserSize a bad idea after calling Chart.setSize()? This involves setting chart.hasUserSize = false;

Utilizing before and after print events: Details on handling these events can be found in this discussion: Do modern browsers support onbeforeprint / onafterprint HTML events?, where the answer is (in essence) yes, but necessitates using a combination of onbeforeprint events and the watchMedia eventHandler API.

Hopefully, this information proves beneficial to someone!

Adjust the size of a Highcharts chart before printing

Answer №1

Answer №2

Answer №3

Similar questions

Create a submit button using Vue.js for text input

Issue with child prop not being updated despite changes in parent component

Tips for managing unexpected TCP disconnects?

Ways to automatically check a checkbox using jQuery

Prevent postback in case of validation error

Next.js is throwing an error: "Module cannot be found: Unable to resolve 'canvg'"

Having trouble with jQuery functionality when using Laravel 7 mix

Is storing HTML tags in a database considered beneficial or disadvantageous?

Retrieving an Array in CakePHP Through an Ajax Post Request

Prevent scrolling in AngularJS model popups

Is there a faster alternative to using jQuery's indexOf method?

Implementing personalized callback methods for AJAX requests in Prototype

Show or hide the legend on a highchart dynamically

The process of manipulating the content of an HTML textarea using Selenium with Python

React not functioning properly when packaged with Webpack

Building Nested Divs with JavaScript

Encase children within a view component in React Native

Is it possible to utilize dynamic imports in conjunction with a for loop in Next.js?

What is the difference between using 'classes' and 'className' in Material UI?

What is the most efficient way to apply multiple values to the css property outline?