Highcharts Export Server
Use this page to experiment with the different options.
Highcharts config object (JSON)
SVG (XML)
Options
Specify here your Highcharts configuration object.
{ xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }] };
Image file format
image/png
image/jpeg
image/svg+xml
application/pdf
Width
The exact pixelwidth of the exported image. Defaults to chart.width or 600px. Maximum width is set to 2000px
Scale
Give in a scaling factor for a higher image resolution. Maximum scaling is set to 4x. Remember that the width parameter has a higher precedence over scaling.
Constructor
This will be either 'Chart' or 'StockChart' depending on if
you want a Highcharts or an HighStock chart.
Chart
StockChart
Callback
The callback will be fired after the chart is created.
function(chart) { chart.renderer.arc(200, 150, 100, 50, -Math.PI, 0).attr({ fill : '#FCFFC5', stroke : 'black', 'stroke-width' : 1 }).add(); }
Svg Content
Paste in 'raw' svg markup.
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" width="837" height="300"> <defs> <clipPath id="highcharts-8"> <rect rx="0" ry="0" fill="none" x="0" y="0" width="9999" height="300" stroke-width="0.000001"></rect> </clipPath> <clipPath id="highcharts-9"> <rect fill="none" x="0" y="0" width="767" height="197"></rect> </clipPath> </defs> <rect rx="5" ry="5" fill="#FFFFFF" x="0" y="0" width="837" height="300" stroke-width="0.000001"></rect> <g class="highcharts-grid"></g> <g class="highcharts-grid"> <path fill="none" d="M 60 198.5 L 827 198.5" stroke="#C0C0C0" stroke-width="1"></path> <path fill="none" d="M 60 158.5 L 827 158.5" stroke="#C0C0C0" stroke-width="1"></path> <path fill="none" d="M 60 119.5 L 827 119.5" stroke="#C0C0C0" stroke-width="1"></path> <path fill="none" d="M 60 79.5 L 827 79.5" stroke="#C0C0C0" stroke-width="1"></path> <path fill="none" d="M 60 40.5 L 827 40.5" stroke="#C0C0C0" stroke-width="1"></path> <path fill="none" d="M 60 237.5 L 827 237.5" stroke="#C0C0C0" stroke-width="1"></path> </g> <g class="highcharts-axis"> <path fill="none" d="M 187.5 237 L 187.5 242" stroke="#C0D0E0" stroke-width="1"></path> <path fill="none" d="M 251.5 237 L 251.5 242" stroke="#C0D0E0" stroke-width="1"></path> <path fill="none" d="M 315.5 237 L 315.5 242" stroke="#C0D0E0" stroke-width="1"></path> <path fill="none" d="M 379.5 237 L 379.5 242" stroke="#C0D0E0" stroke-width="1"></path> <path fill="none" d="M 442.5 237 L 442.5 242" stroke="#C0D0E0" stroke-width="1"></path> <path fill="none" d="M 506.5 237 L 506.5 242" stroke="#C0D0E0" stroke-width="1"></path> <path fill="none" d="M 570.5 237 L 570.5 242" stroke="#C0D0E0" stroke-width="1"></path> <path fill="none" d="M 634.5 237 L 634.5 242" stroke="#C0D0E0" stroke-width="1"></path> <path fill="none" d="M 698.5 237 L 698.5 242" stroke="#C0D0E0" stroke-width="1"></path> <path fill="none" d="M 762.5 237 L 762.5 242" stroke="#C0D0E0" stroke-width="1"></path> <path fill="none" d="M 826.5 237 L 826.5 242" stroke="#C0D0E0" stroke-width="1"></path> <path fill="none" d="M 123.5 237 L 123.5 242" stroke="#C0D0E0" stroke-width="1"></path> <path fill="none" d="M 60 237.5 L 827 237.5" stroke="#C0D0E0" stroke-width="1" visibility="visible"></path> </g> <g class="highcharts-axis"> <text x="24" y="138.5" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:12px;color:#6d869f;font-weight:bold;fill:#6d869f;" transform="rotate(270 24 138)" text-anchor="middle" visibility="visible"> <tspan x="24">Y-values</tspan> </text> </g> <g class="highcharts-series-group"> <g class="highcharts-series" visibility="visible" transform="translate(60,40)" clip-path="url(#highcharts-9)"> <path fill="none" d="M 31.958333333333332 173.4 L 95.875 140.7 L 159.79166666666666 113.2 L 223.70833333333334 95.2 L 287.625 83.5 L 351.54166666666663 58.3 L 415.4583333333333 90.1 L 479.37499999999994 80 L 543.2916666666666 26.5 L 607.2083333333334 44 L 671.125 121.7 L 735.0416666666666 154.1" stroke="black" stroke-width="5" stroke-opacity="0.049999999999999996" transform="translate(1, 1)"></path> <path fill="none" d="M 31.958333333333332 173.4 L 95.875 140.7 L 159.79166666666666 113.2 L 223.70833333333334 95.2 L 287.625 83.5 L 351.54166666666663 58.3 L 415.4583333333333 90.1 L 479.37499999999994 80 L 543.2916666666666 26.5 L 607.2083333333334 44 L 671.125 121.7 L 735.0416666666666 154.1" stroke="black" stroke-width="3" stroke-opacity="0.09999999999999999" transform="translate(1, 1)"></path> <path fill="none" d="M 31.958333333333332 173.4 L 95.875 140.7 L 159.79166666666666 113.2 L 223.70833333333334 95.2 L 287.625 83.5 L 351.54166666666663 58.3 L 415.4583333333333 90.1 L 479.37499999999994 80 L 543.2916666666666 26.5 L 607.2083333333334 44 L 671.125 121.7 L 735.0416666666666 154.1" stroke="black" stroke-width="1" stroke-opacity="0.15" transform="translate(1, 1)"></path> <path fill="none" d="M 31.958333333333332 173.4 L 95.875 140.7 L 159.79166666666666 113.2 L 223.70833333333334 95.2 L 287.625 83.5 L 351.54166666666663 58.3 L 415.4583333333333 90.1 L 479.37499999999994 80 L 543.2916666666666 26.5 L 607.2083333333334 44 L 671.125 121.7 L 735.0416666666666 154.1" stroke="#4572A7" stroke-width="2"></path> </g> <g class="highcharts-markers" visibility="visible" transform="translate(60,40)" clip-path="none"> <path fill="#4572A7" d="M 735.0416666666666 150.1 C 740.3696666666666 150.1 740.3696666666666 158.1 735.0416666666666 158.1 C 729.7136666666667 158.1 729.7136666666667 150.1 735.0416666666666 150.1 Z" stroke="#FFFFFF" stroke-width="0.000001"></path> <path fill="#4572A7" d="M 671.125 117.7 C 676.453 117.7 676.453 125.7 671.125 125.7 C 665.797 125.7 665.797 117.7 671.125 117.7 Z" stroke="#FFFFFF" stroke-width="0.000001"></path> <path fill="#4572A7" d="M 607.2083333333334 40 C 612.5363333333333 40 612.5363333333333 48 607.2083333333334 48 C 601.8803333333334 48 601.8803333333334 40 607.2083333333334 40 Z" stroke="#FFFFFF" stroke-width="0.000001"></path> <path fill="#4572A7" d="M 543.2916666666666 22.5 C 548.6196666666666 22.5 548.6196666666666 30.5 543.2916666666666 30.5 C 537.9636666666667 30.5 537.9636666666667 22.5 543.2916666666666 22.5 Z" stroke="#FFFFFF" stroke-width="0.000001"></path> <path fill="#4572A7" d="M 479.37499999999994 76 C 484.7029999999999 76 484.7029999999999 84 479.37499999999994 84 C 474.04699999999997 84 474.04699999999997 76 479.37499999999994 76 Z" stroke="#FFFFFF" stroke-width="0.000001"></path> <path fill="#4572A7" d="M 415.4583333333333 86.1 C 420.7863333333333 86.1 420.7863333333333 94.1 415.4583333333333 94.1 C 410.13033333333334 94.1 410.13033333333334 86.1 415.4583333333333 86.1 Z" stroke="#FFFFFF" stroke-width="0.000001"></path> <path fill="#4572A7" d="M 351.54166666666663 54.3 C 356.8696666666666 54.3 356.8696666666666 62.3 351.54166666666663 62.3 C 346.21366666666665 62.3 346.21366666666665 54.3 351.54166666666663 54.3 Z" stroke="#FFFFFF" stroke-width="0.000001"></path> <path fill="#4572A7" d="M 287.625 79.5 C 292.953 79.5 292.953 87.5 287.625 87.5 C 282.297 87.5 282.297 79.5 287.625 79.5 Z" stroke="#FFFFFF" stroke-width="0.000001"></path> <path fill="#4572A7" d="M 223.70833333333334 91.2 C 229.03633333333335 91.2 229.03633333333335 99.2 223.70833333333334 99.2 C 218.38033333333334 99.2 218.38033333333334 91.2 223.70833333333334 91.2 Z" stroke="#FFFFFF" stroke-width="0.000001"></path> <path fill="#4572A7" d="M 159.79166666666666 109.2 C 165.11966666666666 109.2 165.11966666666666 117.2 159.79166666666666 117.2 C 154.46366666666665 117.2 154.46366666666665 109.2 159.79166666666666 109.2 Z" stroke="#FFFFFF" stroke-width="0.000001"></path> <path fill="#4572A7" d="M 95.875 136.7 C 101.203 136.7 101.203 144.7 95.875 144.7 C 90.547 144.7 90.547 136.7 95.875 136.7 Z" stroke="#FFFFFF" stroke-width="0.000001"></path> <path fill="#4572A7" d="M 31.958333333333332 169.4 C 37.28633333333333 169.4 37.28633333333333 177.4 31.958333333333332 177.4 C 26.630333333333333 177.4 26.630333333333333 169.4 31.958333333333332 169.4 Z" stroke="#FFFFFF" stroke-width="0.000001"></path> </g> </g> <text x="419" y="25" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:16px;color:#3e576f;fill:#3e576f;" text-anchor="middle" class="highcharts-title"> <tspan x="419">Chart title</tspan> </text> <g class="highcharts-legend" transform="translate(378,260)"> <rect rx="5" ry="5" fill="none" x="0.5" y="0.5" width="81" height="24" stroke-width="1" stroke="#909090" visibility="visible"></rect> <g clip-path="url(#highcharts-8)"> <g> <g class="highcharts-legend-item" transform="translate(8,3)"> <path fill="none" d="M 0 11 L 16 11" stroke-width="2" stroke="#4572A7"></path> <path fill="#4572A7" d="M 8 7 C 13.328 7 13.328 15 8 15 C 2.6719999999999997 15 2.6719999999999997 7 8 7 Z" stroke="#FFFFFF" stroke-width="0.000001"></path> <text x="21" y="15" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:12px;cursor:pointer;color:#3e576f;fill:#3e576f;" text-anchor="start"> <tspan x="21">Series 1</tspan> </text> </g> </g> </g> </g> <g class="highcharts-axis-labels"> <text x="91.95833333333333" y="251" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:11px;width:44px;color:#666;line-height:14px;fill:#666;" text-anchor="middle" visibility="visible"> <tspan x="91.95833333333333">Jan</tspan> </text> <text x="155.87499999999997" y="251" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:11px;width:44px;color:#666;line-height:14px;fill:#666;" text-anchor="middle" visibility="visible"> <tspan x="155.87499999999997">Feb</tspan> </text> <text x="219.79166666666666" y="251" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:11px;width:44px;color:#666;line-height:14px;fill:#666;" text-anchor="middle" visibility="visible"> <tspan x="219.79166666666666">Mar</tspan> </text> <text x="283.7083333333333" y="251" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:11px;width:44px;color:#666;line-height:14px;fill:#666;" text-anchor="middle" visibility="visible"> <tspan x="283.7083333333333">Apr</tspan> </text> <text x="347.625" y="251" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:11px;width:44px;color:#666;line-height:14px;fill:#666;" text-anchor="middle" visibility="visible"> <tspan x="347.625">May</tspan> </text> <text x="411.54166666666663" y="251" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:11px;width:44px;color:#666;line-height:14px;fill:#666;" text-anchor="middle" visibility="visible"> <tspan x="411.54166666666663">Jun</tspan> </text> <text x="475.4583333333333" y="251" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:11px;width:44px;color:#666;line-height:14px;fill:#666;" text-anchor="middle" visibility="visible"> <tspan x="475.4583333333333">Jul</tspan> </text> <text x="539.3749999999999" y="251" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:11px;width:44px;color:#666;line-height:14px;fill:#666;" text-anchor="middle" visibility="visible"> <tspan x="539.3749999999999">Aug</tspan> </text> <text x="603.2916666666666" y="251" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:11px;width:44px;color:#666;line-height:14px;fill:#666;" text-anchor="middle" visibility="visible"> <tspan x="603.2916666666666">Sep</tspan> </text> <text x="667.2083333333333" y="251" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:11px;width:44px;color:#666;line-height:14px;fill:#666;" text-anchor="middle" visibility="visible"> <tspan x="667.2083333333333">Oct</tspan> </text> <text x="731.125" y="251" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:11px;width:44px;color:#666;line-height:14px;fill:#666;" text-anchor="middle" visibility="visible"> <tspan x="731.125">Nov</tspan> </text> <text x="795.0416666666666" y="251" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:11px;width:44px;color:#666;line-height:14px;fill:#666;" text-anchor="middle" visibility="visible"> <tspan x="795.0416666666666">Dec</tspan> </text> </g> <g class="highcharts-axis-labels"> <text x="52" y="243.1" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:11px;width:364px;color:#666;line-height:14px;fill:#666;" text-anchor="end" visibility="visible"> <tspan x="52">0</tspan> </text> <text x="52" y="203.70000000000002" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:11px;width:364px;color:#666;line-height:14px;fill:#666;" text-anchor="end" visibility="visible"> <tspan x="52">50</tspan> </text> <text x="52" y="164.29999999999998" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:11px;width:364px;color:#666;line-height:14px;fill:#666;" text-anchor="end" visibility="visible"> <tspan x="52">100</tspan> </text> <text x="52" y="124.9" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:11px;width:364px;color:#666;line-height:14px;fill:#666;" text-anchor="end" visibility="visible"> <tspan x="52">150</tspan> </text> <text x="52" y="85.5" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:11px;width:364px;color:#666;line-height:14px;fill:#666;" text-anchor="end" visibility="visible"> <tspan x="52">200</tspan> </text> <text x="52" y="46.1" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:11px;width:364px;color:#666;line-height:14px;fill:#666;" text-anchor="end" visibility="visible"> <tspan x="52">250</tspan> </text> </g> <g class="highcharts-tooltip" style="padding:0;white-space:nowrap;" visibility="hidden"> <rect rx="5" ry="5" fill="none" x="0" y="0" width="10" height="10" stroke-width="5" fill-opacity="0.85" stroke="black" stroke-opacity="0.049999999999999996" transform="translate(1, 1)"></rect> <rect rx="5" ry="5" fill="none" x="0" y="0" width="10" height="10" stroke-width="3" fill-opacity="0.85" stroke="black" stroke-opacity="0.09999999999999999" transform="translate(1, 1)"></rect> <rect rx="5" ry="5" fill="none" x="0" y="0" width="10" height="10" stroke-width="1" fill-opacity="0.85" stroke="black" stroke-opacity="0.15" transform="translate(1, 1)"></rect> <rect rx="5" ry="5" fill="rgb(255,255,255)" x="0" y="0" width="10" height="10" stroke-width="2" fill-opacity="0.85"></rect> <text x="5" y="18" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:12px;color:#333333;fill:#333333;"></text> </g> <text x="827" y="295" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:10px;cursor:pointer;color:#909090;fill:#909090;" text-anchor="end"> <tspan x="827">Highcharts.com</tspan> </text> <g class="highcharts-tracker"> <g visibility="visible" transform="translate(60,40)" clip-path="url(#highcharts-9)"> <path fill="none" d="M 21.958333333333332 173.4 L 31.958333333333332 173.4 L 95.875 140.7 L 159.79166666666666 113.2 L 223.70833333333334 95.2 L 287.625 83.5 L 351.54166666666663 58.3 L 415.4583333333333 90.1 L 479.37499999999994 80 L 543.2916666666666 26.5 L 607.2083333333334 44 L 671.125 121.7 L 735.0416666666666 154.1 L 745.0416666666666 154.1" stroke-linejoin="bevel" visibility="visible" stroke-opacity="0.000001" stroke="rgb(192,192,192)" stroke-width="22" style=""></path> </g> </g> </svg>
