Harshith C
Posts: 3
Joined: Tue Sep 20, 2022 9:14 am
Location: Bengaluru

Highcharts Print option help

Hello,
I an facing issue while printing highcharts, i need suggestions how to fix it.
By default we have these exporting options, I have similar six charts below this chart which are in different <div> and have their own ID's. except print option everything works fine, but when i click on print it is taking entire page to print instead of that particular chart, but rest other options working for the chart i click. I've posted two images, please any suggestions would really help.

Here's my code

Code: Select all

<div id="LOIUnitsChart"></div>

Code: Select all

var myChart1 = new Highcharts.chart('LOIUnitsChart',{
                    credits:{
                        enabled: false  
                    },
                    chart: {
                        reflow: true,
                        type: 'column'
                    },
                    exporting: {
                        buttons: {
                          contextButton: {
                            menuItems: ["printChart","downloadPDF","downloadPNG","downloadJPEG","downloadSVG","downloadCSV","downloadXLS"]
                          }
                        },
                      },
                    title: {
                        text: 'YTD LOIs Signed by Week (Units)',
                        style: {
                        	color: 'black',
                            fontWeight: 'bold'
                        }
                    },
                    xAxis: [{
                        title: {
                            text : '',
                            style: {
                                
                            }
                        },
                        categories: weeks
                    }],
                    yAxis: [ {
                            title: {
                                text : '',
                                style: {
                                    
                                }
                            }
                        }
                    ],
                    plotOptions: {
                        series: {
                            borderWidth:2,
            				borderColor: '#151B54',
                            color: '#357EC7',
                            dataLabels: {
                                enabled: true,
                                inside: true,
                                formatter: function(){
                                    return (this.y!=0)?this.y:"";
                                }
                            },
                            events: {
                                legendItemClick: function() {
                                    return true;
                                }
                            }
                        }
                    },
                    series: [{
                                name: 'Goal',
                                type: 'area',
                                borderColor: 'red',
                                color: '#9BE280',
                                data: goal,
                                dataLabels: {
                                    enabled: false
                                },
                                marker: {
                                    enabled: false,
                                    symbol: 'circle',
                                    radius: 1,
                                    states: {
                                        hover: {
                                            enabled: false
                                        }
                                    }
                                }
                            },
                            {
                                name: 'Units',
                                data: units,
                                point: {
                                    events:{
                                            click: function (event) {
                                                if(event.point.name == this.axis){
                                                    var week = 'W'+(this.x+1);
                                                    helper.getLOIUnitsRecs(component,event,helper,week);
                                                }
                                            }
                                        }
                                    }
                            },
                            {   
                                name: 'Average',
                                type: 'spline',
                                color: '#FFA533',
                                dashStyle: 'dash',
                                lineWidth: 3,
                                marker: {
                                    radius: 1
                                },
                                data: avg,
                                dataLabels: {
                                    enabled: false
                                },
                            }],
                            legend: {
                                enabled: true,
                                symbolHeight: 12,
                                symbolWidth: 15,
                                symbolRadius:0.1
                            }
                });
Attachments
Screenshot (3).png
Screenshot (3).png (58.84 KiB) Viewed 666 times
Capture.PNG
Capture.PNG (74.44 KiB) Viewed 666 times
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Highcharts Print option help

Hi Harshith C!
Welcome to our forum and thanks for contacting us with your question!

I was trying to reproduce your problem, but in my case, everything is working correctly. You can check the simple demo here: https://jsfiddle.net/BlackLabel/epvct2fm/

Could you reproduce the issue in an online editor that I could work on? You can use my demo and send me a forked link.

Looking for your response.
Regards!
Hubert Kozik
Highcharts Developer
Harshith C
Posts: 3
Joined: Tue Sep 20, 2022 9:14 am
Location: Bengaluru

Re: Highcharts Print option help

hubert.k wrote: Tue Sep 20, 2022 10:09 am Hi Harshith C!
Welcome to our forum and thanks for contacting us with your question!

I was trying to reproduce your problem, but in my case, everything is working correctly. You can check the simple demo here: https://jsfiddle.net/BlackLabel/epvct2fm/

Could you reproduce the issue in an online editor that I could work on? You can use my demo and send me a forked link.

Looking for your response.
Regards!
Thanks for your response, surprisingly it works correctly in online editor. But i face this issue in my project, I'm using Highcharts in Salesforce Lightning Aura Component, is there any other way we could print chart? If so please let me know, btw i even tried overriding default print method and tried to print using ID of the chart, again same issue but works in Online editor :(
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Highcharts Print option help

Harshith C,
Well, it should work out of the box. I have a question. What version of Highcharts are you using? It could be helpful for me to know that information.

Regards!
Hubert Kozik
Highcharts Developer
Harshith C
Posts: 3
Joined: Tue Sep 20, 2022 9:14 am
Location: Bengaluru

Re: Highcharts Print option help

hubert.k wrote: Wed Sep 21, 2022 6:10 am Harshith C,
Well, it should work out of the box. I have a question. What version of Highcharts are you using? It could be helpful for me to know that information.

Regards!
Highcharts JS v10.2.1 (2022-08-29) this is the one
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Highcharts Print option help

Harshith C,
Unfortunately, I am not familiar with the Salesforce platform. I am assuming, that the issue is coming from this.

I can propose you test maybe client-side exporting:
- offline-exporting module: https://www.highcharts.com/docs/export- ... ide-export
Just add an offline exporting module, just like in the demos in the link above and maybe it will help.

Regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”