¿Es posible colocar las etiquetas de datos Highcharts dependiendo del valor?

Question

Estoy usando Highcharts para mostrar un gráfico de barras, con 2 barras superpuestas entre sí, y una etiqueta de datos a la derecha de ellas, que muestra el valor exacto.

El problema aquí es que cuando el valor está por encima del 80%, la etiqueta se desborda del cuadro en el cuadro, repasando otro texto y volviéndolo ilegible.

Aquí están mis plotOptions:

plotOptions: { 
      bar: { 
       groupPadding: 0.5, 
       pointWidth : 30, 
       borderWidth: 0, 
       dataLabels: { 
        enabled: true, 
        y:-5, 
        color:"black", 
        style: { 
         fontSize: "12px" 
        }, 
        formatter: function(){ 
         if(this.y > 80) 
         { 
          this.series.chart.options.plotOptions.bar.dataLabels.x -= 20; 
         } 
         if(this.series.name == "Tests OK") 
          return "Tests OK : <strong>"+Math.round(this.y*10)/10+"%</strong>"; 
         else 
          return "<br/>Tests Executed : <strong>"+Math.round(this.y*10)/10+"%</strong>"; 
        } 
       } 
      } 
     } 

pensé que podría editar las opciones de gráficos en movimiento, utilizando this.series.chart.options.plotOptions.bar.dataLabels.x -= 20;, pero esto no funciona.

Seguramente no soy el primero que ha encontrado un problema como ese. Alguna idea ?

Gracias

Answer 1

Parece que no es posible hacerlo desde dentro del formatter.

Pero puede configurarlas después de que se represente (cargue) la tabla. Intentar algo como esto

$.each(chartObj.series[0].data, function(i, point) { 
    if(point.y > 100) { 
     point.dataLabel.attr({x:20}); 
    } 
}); 

en el load callback (o si lo necesita en el redraw callback).

Ver ejemplo here.

Answer 2

He estado tratando de averiguar algo de esto por mí mismo ... parece que en lugar de

this.series.chart.options.plotOptions.bar.dataLabels.x -= 20; 

podría usar ...

this.series.options.dataLabels.x = -20; 

. .. en este punto, estoy tratando de entender si puedo discernir la ubicación de una etiqueta de datos para poder reposicionarla si es necesario.

Answer 3

Aunque la respuesta de Bhesh resuelve el problema del posicionamiento x/y, Highcharts ignora cualquier cambio en la propiedad de estilo de dataLabels (see the problem here). Sin embargo, puede anular los estilos de un punto individual pasándolo a través del objeto de datos:

series: [{ data: [29.9, 106, { y: 135, dataLabels: { style: { fontSize: 20 } } }] 

example from Highcharts docs

que era capaz de conseguir estilos dinámicos iterando sobre mis datos antes de pasar todo el objeto a Highcharts renderizar

Answer 4

Esto es lo que terminé con. El setTimeout es necesario o la propiedad dataLabel no existe en el punto:

formatter: function() { 
    var point = this.point; 
    window.setTimeout(function() { 
     if (point.s < 0) { 
      point.dataLabel.attr({ 
       y: point.plotY + 20 
      }); 
     } 
    }); 
    //this.series.options.dataLabels.y = -6; 
    var sty = this.point.s < 0 ? 'color:#d00' : 'color:#090;' //other style has no effect:(
    return '<span style="' + sty + '">' + Math.abs(this.point.s) + '</span>'; 
}