This is an archived forum post. The information may be outdated. Contact us if you have any questions.

PDF from page using Highcharts

jwong.dayspring wrote on 2011-02-01:
I have a page that uses Highcharts to provide graphs and charts. When I try to make a PDF of a page that has a pie chart, the pie chart doesn't render.

Here is the source of a test page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Highcharts Example</title>
		
		
		<!-- 1. Add these JavaScript inclusions in the head of your page -->
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script type="text/javascript" src="http://www.highcharts.com/js/2.1.2/highcharts.js"></script>

		
		<!-- 2. Add the JavaScript to initialize the chart on document ready -->
		<script type="text/javascript">
		
			var chart;
			$(document).ready(function() {
				Highcharts.setOptions({
    					colors: ['#32A2D4', 
						 '#F47833', 
						 '#4EC342', 
						 '#D23389', 
						 '#377698', 
						 '#AA5D75', 
						 '#B79E6E',
						 '#F1CD33']
				});

				chart = new Highcharts.Chart({
					chart: {
						animation: false,
						renderTo: 'container',
						margin: [0, 0, 0, 0]
					},
					title: {
						text: ''
					},
					plotArea: {
						shadow: null,
						borderWidth: null,
						backgroundColor: null
					},
					tooltip: {
						formatter: function() {
							return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
						}
					},
					plotOptions: {
						pie: {
							animation:false,
							allowPointSelect: false,
							cursor: 'pointer',
							dataLabels: {
								enabled: false,
								formatter: function() {
									if (this.y > 5) return this.point.name;
								},
								color: 'white',
								style: {
									font: '13px Trebuchet MS, Verdana, sans-serif'
								}
							}
						}
					},
					legend: {enabled: false
					},
				    series: [{
						type: 'pie',
						name: 'Vender share',
						data: [
							['Google',   45.0],
							['MSN',       26.8],
							{
								name: 'Yahoo',    
								y: 12.8,
								sliced: false
							},
							['Ask',    8.5],
							['Looksmart',     6.9]
						]
					}]
				});
			});
				
		</script>
		
	</head>
	<body>
		
		<!-- 3. Add the container -->
		<div id="container" style="width: 800px; height: 193px; margin: 0 auto"></div>
		
				
	</body>
</html>
support wrote on 2011-02-01:
It is a bug, thanks for the report. We are looking into this and will post an update here.
support wrote on 2011-02-02:
We have deployed a fix, the code above should work now. Please, let us know if you see any other problems with Highcharts.
jwong.dayspring wrote on 2011-02-02:
Great! Thanks for the quick response and fix. I've checked my page and can confirm that it does output to PDF as expected. I'm very impressed by the fast resolution.
alexsouy wrote on 2011-02-26:
Where I have to download the Highcharts have deployed fix? Because when i see demo in Pie Chart , i can't see render in PDF file after click print PDF.

Thx