srdixit
Posts: 8
Joined: Thu Feb 08, 2018 5:35 pm

Highcharts download PNG is downloading only visible area if it has horizontal scroll bars.

If a chart has horizontal scroll bar and there is some data hidden behind the scrollbar, Then if I download as PNG then I am unable to get complete picture of the chart.

Code: Select all

chart: {
        renderTo: 'chart1',
        type: 'column'
        },
        title: {
            text: 'Chart Title'
        },
        subtitle: {
            text: ''
        },
        colors: ['#005073','#64e572','#24cbe5','#F7A35C','#B593CD','#D0B16A','#A45B10','#00CFD2','#00CFD2','#3399cc','#9B59B6'],
        xAxis: {
		min:0,
		max:9,
        categories:['2008','2009',2010','2011','2012','2013','2014','2015','2016','2017','2018','2019']
        },
	yAxis: {
		min: 0,
		title: {
			text: 'Count'
		}
	},
        tooltip: {
            formatter: function() {
                return '' + this.series.name + ': ' + this.y;
            }
        },
        plotOptions: {
            column: {
			stacking: 'normal',
			pointPadding: 0.2,
			borderWidth: 0.5,
			 dataLabels: {
				enabled: true
			}
		  }
        },
        legend: {
            layout: 'horizontal',
            align: 'center',
            verticalAlign: 'bottom',
            floating: false,
            labelFormatter: function() {
            	return '<div class="' + this.name + '-arrow"></div><span style="font-family: \'Advent Pro\', sans-serif; font-size:12px">' + this.name + '</span><br/>';
            }
        },
        credits: {
            enabled: false
        },
         exporting: {
         	enabled: true
    },
        series: [{
        name: 'Installation',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175,1124,8876,1234]
    }],
	scrollbar: {
	  enabled: true,
	  barBackgroundColor: 'gray',
	  barBorderRadius: 7,
	  barBorderWidth: 0,
	  buttonBackgroundColor: 'gray',
	  buttonBorderWidth: 0,
	  buttonArrowColor: 'yellow',
	  buttonBorderRadius: 7,
	  rifleColor: 'yellow',
	  trackBackgroundColor: 'white',
	  trackBorderWidth: 1,
	  trackBorderColor: 'silver',
	  trackBorderRadius: 7
	}
    });

bastss
Site Admin
Posts: 1192
Joined: Wed Oct 17, 2018 10:59 am

Re: Highcharts download PNG is downloading only visible area if it has horizontal scroll bars.

Hello srdixit,

I have reproduced your code and here is what I got: https://jsfiddle.net/BlackLabel/z5u920Lo/
In my opinion, PNG is downloaded properly. Notice that after rendering your chart scrollbar is set to display some area (first 10 points) because in your option for xAxis min is set to 0 and max is set to 9, but your data has 11 points - that's why you get not a complete picture of the chart. Changing min and max values or click All button on zoom options before downloading is a solution to your issue.

Kind regards!
Sebastian Wędzel,
Highcharts Developer
srdixit
Posts: 8
Joined: Thu Feb 08, 2018 5:35 pm

Re: Highcharts download PNG is downloading only visible area if it has horizontal scroll bars.

Thanks for your reply and solution. For better understanding I have created a live example on jsfiddle :https://jsfiddle.net/y2shtLpe/
1. I want to show only few tick on xAxis. That's why I have added Min: 0, Max: 4.
2. I want to see all the tick from xaxis which were behind the scroll bar, When I download png.

Thanks,
Sri
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Highcharts download PNG is downloading only visible area if it has horizontal scroll bars.

Hi Sri,

To change the chart's options while exporting, use exporting.chartOptions property:

Code: Select all

exporting: {
    enabled: true,
    chartOptions: {
      xAxis: [{
        max: null
      }]
    }
  },

Here is your updated jsFiddle: https://jsfiddle.net/BlackLabel/vqmrej8x

API Reference: https://api.highcharts.com/highcharts/e ... artOptions

Let me know if you have any further questions.

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
srdixit
Posts: 8
Joined: Thu Feb 08, 2018 5:35 pm

Re: Highcharts download PNG is downloading only visible area if it has horizontal scroll bars.

Hi Rafls,

The x-axis values are changed what it should be and also the tick interval also changed.

Xaxis values should be ['2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019']
But
Now its showing like this 0, 2, 4, 6, 8, 10

Thanks,
Sri
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Highcharts download PNG is downloading only visible area if it has horizontal scroll bars.

Hi,

Because I updated the whole xAxis in exporting options without categories array. Paste categories from xAxis to exporting.chartOptions.xAxis and everything will be working fine.

Regards!
Rafal Sebestjanski,
Highcharts Team Lead
srdixit
Posts: 8
Joined: Thu Feb 08, 2018 5:35 pm

Re: Highcharts download PNG is downloading only visible area if it has horizontal scroll bars.

rafalS wrote: Mon May 27, 2019 6:57 am Hi,

Because I updated the whole xAxis in exporting options without categories array. Paste categories from xAxis to exporting.chartOptions.xAxis and everything will be working fine.

Regards!
Hi Rafls,

I have pasted from xAxis to exporting.chartOptions.xAxis but when I download the PNG, I am still not getting the full data in downloaded image.

https://jsfiddle.net/dkytv68c/

Thanks,
Sri
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Highcharts download PNG is downloading only visible area if it has horizontal scroll bars.

Well, and have you set xAxis.max to null too? If you want to have all points visible and you want to have year categories, you need to set both xAxis.max and xAxis.categories ;)
Rafal Sebestjanski,
Highcharts Team Lead
jfedor
Posts: 2
Joined: Mon Sep 26, 2022 7:14 pm

Re: Highcharts download PNG is downloading only visible area if it has horizontal scroll bars.

https://jsfiddle.net/BlackLabel/vqmrej8x

In the above example the export does show the full picture only if you don't move the scroll position before exporting. If you move it and then PNG export it it only exports visible part of the chart.

How is export of full chart PNG achieved after it was already scrolled?

Thanks
James
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Highcharts download PNG is downloading only visible area if it has horizontal scroll bars.

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

In the exporting.chartOptions you can define the specific properties of the chart while exporting. Please, check the demo below to see an example with setting scrollbar.showFull during the export.

Demo: https://jsfiddle.net/BlackLabel/95nzLv7s/
API Reference: https://api.highcharts.com/highstock/ex ... artOptions

Let me know if you have any further questions.
Regards!
Hubert Kozik
Highcharts Developer
jfedor
Posts: 2
Joined: Mon Sep 26, 2022 7:14 pm

Re: Highcharts download PNG is downloading only visible area if it has horizontal scroll bars.

Thanks Hubert,

The example you provided with the addition scrollbar.showFull enabled unfortunately yields the same behavior. In Chrome, open it up, export to png, full chart exports which is great, then horizontal scroll to the center then export to png again, full chart is not exported. Just tried it several times.

[img][https://app.vidgrid.com/video/gif/4WdibKDTAX1v.gif]
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Highcharts download PNG is downloading only visible area if it has horizontal scroll bars.

James,

I am truly sorry for that little misunderstanding. Your GIF is not working, but I think I know what is the problem. Unfortunately, it is a known bug, here is a GitHub ticket: https://github.com/highcharts/highcharts/issues/16795 You can leave your comment there. Unfortunately, at that moment I cannot give you any workaround for this. Maybe, on GitHub, someone could investigate the topic deeply and find some temporary solution.

Kind regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”