[Solved]-Highcharts.js draws ugly series line-Highcharts

The line is being sliced in half since it appears on the edge of the drawing "canvas".

Try these yAxis options:

       yAxis: {
            tickPositions: [-3, 0, 3],
            gridLineWidth: 0,
            max: 3.1,
            endOnTick: false
        },

Update fiddle.

For Lower end, just set a min with the max value-->

yAxis: {
      tickPositions: [-3, 0, 3],
      gridLineWidth: 0,
      max: 3.1,
      min: -3.1, // I added this!
      endOnTick: false,
      startOnTick: false // and this!
},

Yet another fiddle.