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

Flipped the dimensions of an image for better responsiveness

How can I implement a feature to automatically close a drawer in a React application using the Material UI

Locate the position of a substring within a Uint8Array

Best practice for pausing a setInterval during a beforeSend function in an AJAX call

In NextJS, where is the best place to run sensitive code to ensure it is only executed server-side?

What's the best method for uploading a file to AWS S3: POST or PUT requests?

Implement image effects in a single div by leveraging the jquery functions .fadeIn/Out and .delay(300)

Finding the location of an "Apply" button on an Angular HTML page

Unable to execute commitlint in husky along with a different custom command

Linking to a Different Tab without Tab Mutation with Bootstrap 3.3.5

Switching from React version 15.6.2 to 16 results in disruptions to the functionality of the web

jQuery alert: A TypeError was caught stating that the object being referred to does not have the 'dialog' method available

Double Tap Required to Update AngularJS Scope

Steps for linking a keypress to trigger a specific action

Experiencing complications with an Angular 2 router

Can you please let me know if it's possible to store an ajax function/call for future reuse?

How can I create a table that is 100% width, with one column that has a flexible size and truncates text

Unable to display items in controller with AngularJS

Encountering an empty array in a PHP script when transmitting form data via AJAX using the POST method

Inquiry regarding modules in Javascript/Typescript: export/import and declarations of functions/objects