Why is the line not displayed in the highcharts?

Question

I am trying to make a donut chart using highcharts. With onmouseover I want to hide all labels and show the selected data label. I am able to do that using these lines:

that.series.dataLabelsGroup.hide();
that.dataLabel.show();

But it also hides my line, which I connect to the data value of the chart. Why is the line not displayed in highcharts? Here is my code:

// Mouseover handler
function(e) {
    var that = this;
    var series = this.series;
    console.log(series);

    for (var i = 0; i < series.data.length; i++) {
        var point = series.data[i];
        console.log(point)

        if (point == this) {
            console.log('yes');
            point.update({
                color: series.chart.options.colors[this.index]
            });
        } else {
            point.update({
                color: '#CCCCCC'
            });
        }
    }
    that.series.dataLabelsGroup.hide();
    that.dataLabel.show();

    return false;
}

jsfiddle http://jsfiddle.net/nyhmdtb8/11/

Answer 1

You don't have to use svg elements directly, but you can hide all necessary data labels during the point updating.

Show data labels:

point.update({
                color: series.chart.options.colors[this.index],
                dataLabels: {
                  enabled: true
                }
              });

and hide data labels:

point.update({
                color: '#CCCCCC',
                dataLabels: {
                  enabled: false
                }
              });

example: http://jsfiddle.net/nyhmdtb8/12/