Highcharts server side rendering draw a mysterious semi circle donut shape

Question

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?

This is the command line that I use:

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

I cannot upload the image. Apparently, my reputation is not enough for upload an image.

You can find the correctly working jsfiddle at this link: http://jsfiddle.net/9LYL5/ P.S. the problem only occurs when I try to export image with server-side-rendering.

You can find how to set up server side highchart rendering and download "highcharts-convert.js", "callback.js" at this link http://www.highcharts.com/docs/export-module/render-charts-serverside/

This is my highcharts options.js file:

{
    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 && 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]
    }]
}

Answer 1

I think this is because you are including the callback.js script from the git repo. This is just at demo callback and it creates a semicircle shape. Remove the callback.js or replace with one of your own that does a callback you need.

Answer 2

Well, I opened your example and everything exported correctly. Please ensure that you have the newest highcharts/highcharts-convert.js.

My result.