How to remove fine white line between halo and Hig

Question

http://jsfiddle.net/0bpkrnd3/4/ demonstrates that there is a very fine white line between the hover halo of a Highcharts pie chart and the pie segment. The halo color is as the same as the hover color and its stroke width is 0.

pie: {
  shadow: false,
    borderWidth: 0,
    states: {
    hover: {
      color: '#ff7f00',
        brightness: 0,
        lineWidth: 0,
        halo: {
        size: 9,
          opacity: 1,
          attributes: {
          fill: '#ff7f00',
            'stroke-width': 0
        }
      }

    }
  }
}

Answer 1

This is anty-aliasing in SVG. You can play around with different options using shape-rendering CSS option: http://jsfiddle.net/0bpkrnd3/5/ (crispEdges looks even worse ;) )

Anyway, there is another solution you can use, instead of halo. Simply disable halo and use point.events to change radius of the slice: http://jsfiddle.net/0bpkrnd3/6/

Code:

    point: {
      events: {
        mouseOver: function() {
          this.graphic.attr({
            r: this.shapeArgs.r + 10
          });
        },
        mouseOut: function() {
            this.graphic.attr({
            r: this.shapeArgs.r
          });
        }
      }
    },