title: Highcharts server side rendering draw a mysterious semi circle donut shape
body: <p>I am using Highcharts server side rendering command line option to generate graphs image on server side. It draws the graph correctly. However, it also always draws an unrelated semi-circle-donut shape on the image independent of configuration file. If I use the same configuration file to produce chart on jsfiddle or on my html page, there will be no problem. The problem only occurs on server side exporting. Does anyone know how to stop it? </p>
  
  <p>This is the command line that I use:</p>
  
  <pre><code>phantomjs  /path/to/highcharts-convert.js \
      -infile /path/to/option.js \
      -callback /path/to/callback.js \
      -outfile /path/to/chart.png -width 2400 \
      -constr Chart -scale 1
  </code></pre>
  
  <p>I cannot upload the image. Apparently, my reputation is not enough for upload an image.</p>
  
  <p>You can find the correctly working jsfiddle at this link: <a href="http://jsfiddle.net/9LYL5/" rel="nofollow">http://jsfiddle.net/9LYL5/</a>
  P.S. the problem only occurs when I try to export image with server-side-rendering. </p>
  
  <p>You can find how to set up server side highchart rendering and download "highcharts-convert.js", "callback.js" at this link 
  <a href="http://www.highcharts.com/docs/export-module/render-charts-serverside/" rel="nofollow">http://www.highcharts.com/docs/export-module/render-charts-serverside/</a></p>
  
  <p>This is my highcharts options.js file:</p>
  
  <pre><code>{
      chart: {
          zoomType: 'xy',
          width: 700,
          height: 520
      },
      credits: {
            enabled: false
      },
      colors: [
               '#2f7ed8', 
               '#910000', 
               '#8bbc21', 
               '#1aadce', 
               '#492970',
               '#f28f43', 
               '#77a1e5', 
               '#c42525', 
               '#a6c96a'
            ],
      title: {
          text: 'Title',
          style: {
              fontSize: '16px',
          }
      },
      xAxis: [{
          categories: ['00:00', '00:15', '00:30', '00:45', '01:00', '01:15', '01:30']
      }],
      yAxis: [{ 
          labels: {
              format: '{value}',
              style: {
                  fontSize: '14px',
                  color: Highcharts.getOptions().colors[1]
              }
          },
          title: {
              text: 'Y axis',
              style: {
                  fontSize: '16px',
                  color: Highcharts.getOptions().colors[1]
              }
          }
      }, { // Secondary yAxis
          title: {
              text: 'Sec Yaxis',
              style: {
                  fontSize: '16px',
                  color: Highcharts.getOptions().colors[0]
              }
          },
          labels: {
              format: '{value}',
              style: {
                  fontSize: '14px',
                  color: Highcharts.getOptions().colors[0]
              }
          },
          opposite: true
      }],
      tooltip: {
          shared: true
      },
      legend: {
          layout: 'horizontal',
          backgroundColor: (Highcharts.theme &amp;&amp; Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
      },
      series: [{
          name: 'first',
          type: 'spline',
          yAxis: 1,
          data: [0, -119.9502311075212, -119.96203992145706, -119.98172620218355, -119.71898290168028, -119.97023935590325, -119.95230287195413]
      },
      {
          name: 'second',
          type: 'spline',
          yAxis: 1,
          data: [0, -119.24222667756482, -119.60905809195222, -119.63522965403729, -119.11011466187935, -119.63643171374981, -119.54969080301575]
  
      },{
          name: 'third',
          type: 'column',
          data: [10, 11, 9, 7, 5, 2, 7]
      },{
          name: 'fourth',
          type: 'column',
          data: [0, -0.7080044299563895, -0.35298182950484147, -0.34649654814626274, -0.6088682398009269, -0.33380764215343106, -0.40261206893838164]
      }]
  }
  </code></pre>