Highcharts rendering line chart in single line

Question

I was using highchart library in my application to visualize my data. I have render Line chart, while first time it's rendering properly. But when I modify dateRange, I am passing updated data to line chart function. But highcharts rendering line chart in single line.

These are the my chart options

     {
    "credits": {
    "enabled": false
     },
     "colors": [
    "#3093d1",
    "#fcb631",
    "#9ad631",
    "#f34ea8",
    "#30bfdd",
    "#fc9532",
    "#9f4bc7",
    "#304ec6",
    "#fcd731",
    "#f08576",
    "#418842"
    ],
    "chart": {
    "plotBackgroundColor": null,
    "plotBorderWidth": null,
    "plotShadow": false,
    "renderTo": {
      "sizzle1448613814074": {
        "parentNode": [
          190,
          49,
          true
        ]
      }
    },
    "subtitle": {
      "text": null
    },
    "tooltip": {
      "shared": true,
      "useHTML": false
    },
    "type": "line"
    },
    "title": {
    "text": null
    },
     "xAxis": {
    "type": "datetime",
    "title": {
      "text": null
    },
    "labels": {},
    "categories": [
      "Oct 28, 2015",
      "Oct 29, 2015",
      "Oct 30, 2015",
      "Oct 31, 2015",
      "Nov 01, 2015",
      "Nov 02, 2015",
      "Nov 03, 2015",
      "Nov 04, 2015",
      "Nov 05, 2015",
      "Nov 06, 2015",
      "Nov 07, 2015",
      "Nov 08, 2015",
      "Nov 09, 2015",
      "Nov 10, 2015",
      "Nov 11, 2015",
      "Nov 12, 2015",
      "Nov 13, 2015",
      "Nov 14, 2015",
      "Nov 15, 2015",
      "Nov 16, 2015",
      "Nov 17, 2015",
      "Nov 18, 2015",
      "Nov 19, 2015",
      "Nov 20, 2015",
      "Nov 21, 2015",
      "Nov 22, 2015",
      "Nov 23, 2015",
      "Nov 24, 2015",
      "Nov 25, 2015",
      "Nov 26, 2015"
    ],
    "crosshair": true,
    "tickInterval": 4
    },
    "yAxis": [
    {
      "labels": {
        "align": "left",
        "x": 0,
        "y": -2
      },
      "title": {
        "text": " "
      },
      "opposite": false,
      "showEmpty": true
    }
    ],
    "plotOptions": {
    "column": {
      "pointPadding": 0,
      "borderWidth": 0
    },
      "pie": {
      "allowPointSelect": true,
      "cursor": "pointer",
      "dataLabels": {
        "enabled": false
      }
    },
    "series": {
      "stacking": "percent"
    }
    },
    "legend": {
    "itemStyle": {
      "font": "9pt Trebuchet MS, Verdana, sans-serif",
      "color": "black",
      "fontWeight": "normal",
      "width": 416
    },
    "itemHoverStyle": {
      "color": "gray"
    },
    "title": "",
    "verticalAlign": "top",
    "borderWidth": 0,
    "enabled": true,
    "adjustChartSize": true
    },
    "series": [
      {
      "name": "shipped_rgm",
      "data": [
        14762955.1,
        19276099.9,
        12988884.9,
        30569084.8,
        24242187.9,
        18379418.8,
        18603495.8,
        18203458.6,
        20938703.3,
        16597939.7,
        20862991.3,
        24023412.9,
        17353371.1,
        17630687.3,
        13725495,
        10981690.9,
        11772224.6,
        15237980.2,
        15214048.4,
        12756909.5,
        13679996.9,
        14433383.5,
        18330217.9,
        13240009.3,
        14947562.6,
        17269289.7,
        14668529,
        15845494.4,
        15551554.6,
        2482537.9
      ],
      "yAxis": 0
    }
    ],
    "navigation": {
    "buttonOptions": {
      "verticalAlign": "top",
      "y": 0,
      "enabled": false
    }
    },
    "exporting": {
    "enabled": false
    },
    "tooltip": {
    "headerFormat": "<span style=\"font-size:10px\">{point.key}</span><table>",
    "pointFormat": "<tr><td style=\"color:{series.color};padding:0\">{series.name}: </td><td style=\"padding:0\"><b>{point.y:,.0f}</b></td></tr>",
    "footerFormat": "</table>",
    "shared": true,
    "useHTML": true
  }
} 

can anyone help me.

Answer 1

You need to comment series.stacking:percentage in plotOptions

"series": {
"stacking": "percent" //comment it
}

see the working fiddle of your code