Hide label directions on Highcharts pie charts

In Highcharts, I use the dataLabel formatter to return an empty string value for null values. This effectively hides the label for null values. However, on pie charts, there is a landmark pointing to each piece of the pie, even if the slice has a zero value. I cannot remove these recommendations without directly manipulating DOM elements. I would like to keep empty pieces of cake in the chart because I am dynamically updating the chart based on user-defined filter criteria, but I would like to hide the guidelines pointing to empty pieces of cake.

Does anyone know a way to configure Highcharts to remove recommendations that point to an empty piece of cake? I can clear the shortcut itself using the following format:

formatter: function () { var y = this.y; if (y == 0) return ""; ... } 
+4
source share
3 answers

When the formatting function evaluates the displayed value, the context has access to the guide line path element. I was able to hide the manual by making the following changes to the formatter:

 formatter: function () { var y = this.y; //Hide the labels for empty pie slices if (y == 0) { //If there is a pie chart label guideline, hide it if (this.point.connector) $(this.point.connector.element).attr("stroke", "#FFFFFF"); return ""; } //If the label guideline was previously hidden, show it if (this.point.connector) $(this.point.connector.element).attr("stroke", "#000000"); ... } 
+1
source

You can try:

  if(this.y == 0) return null else return this.y 
+2
source

Make the connector width 0.

 dataLabels: { connectorWidth: 0, ... } 
0
source

All Articles