Highcharts Export Server

This page allows you to experiment with different options for the export server.

Highcharts config object (JSON)

SVG (XML)

Options

Your Highcharts configuration object.

Image file format Width

The exact pixel width of the exported image. Defaults to chart.width or 600px. Maximum width is 2000px.

Scale

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

Either Chart or StockChart depending on what product you use.

Callback

The callback will be fired after the chart is created.

Preview

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>