Highchart not showing 0 data correctly for pie chart

Question

I have a highchart(pie chart) with multiple fields (here added only two). Which is giving me issue for 0 values.

The conditions are as described below:

If my first field is 100% the pie chart renders a line of 0% for the other field

Refer to this fiddle : http://jsfiddle.net/rndmmuz6/4/

data: [{
        name: 'Check1',
        y: 100
    },
    {
        name: 'Check2',
        y: 0
    }]

but if my second field is 100% then the pie chart does not render a 0% field for the first fields

Refer to this fiddle : http://jsfiddle.net/rndmmuz6/3/

 data: [{
        name: 'Check1',
        y: 0
    },
    {
        name: 'Check2',
        y: 100
    }]

I want the line to always appear.

Answer 1

This bug have been reported here, you can use borderWith : 0 like that :

plotOptions: {
    pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
            enabled: true,
            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
            style: {
                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
            }
        },
        borderWidth:0
    }
},

Fiddle

Answer 2

Destroying the graphical element of the point can be a workaround here:

    events: {
      load: function() {
        this.series[0].points.forEach(function(p) {
          if(!p.y) {
            p.graphic.destroy();
          }
        });
      }
    }

Live demo: http://jsfiddle.net/kkulig/ojd4wn3f/

Answer 3

I found the following code which overrides the shapeArgs of the highchart to render the line

Refer to this fiddle: http://jsfiddle.net/rndmmuz6/7/

Highcharts.wrap(Highcharts.seriesTypes.pie.prototype, 'drawPoints', function (proceed) {
    Highcharts.each(this.points, function (p) {
        if (p.shapeArgs) {
            p.shapeArgs.open = false;
        }
    });
    proceed.call(this);
});