non viene visualizzata. Highcharts

Question

Sto tentando di mostrare i datalabels. ma DATALABEL la barra nera non viene mostrata. perché?

http://jsfiddle.net/o4pt855e/

altri bar vengono visualizzati bene. Colgo l'occasione per chiedere come posso mettere una condizione? se il valore è inferiore a 5, DATALABEL viene mostrato a sinistra, altrimenti a destra.

$(function() { 
$('#container').highcharts({ 
     chart: { 
      type: 'bar' 
     }, 
     title: { 
      text: 'Mi EPS' 
     }, 
     xAxis: { 
      //categories: ["number1", "number2", "number3", "number4","number5"], 
      title: { 
       text: null 
      }, 
      labels: { 

      // align: 'center', 
       x: -5, 
       y: -20, 
       useHTML: true, 
       format: '<div style="position: absolute; left: 40px"> my labelL is very large ***************************************this in other line! </div> <img style="height: 30px; width: 30px; margin-top: 10px" src="https://cdn2.iconfinder.com/data/icons/free-3d-printer-icon-set/512/Plastic_model.png"></img>' 

      } 

     }, 
     yAxis: { 

      title: { 
       text: 'Resultado', 
       align: 'right' 
      } 

     }, 
     tooltip: { 
      valueSuffix: ' dollars' 
     }, 
     plotOptions: { 
      bar: { 
       dataLabels: { 
        enabled: true, 
        align: 'left', 
        color: '#FFFFFF', 
        inside: true, 
        crop: false, 
        overflow:"none", 
         formatter: function() { 

        return this.series.name+ " "+ this.y; 

        console.log(this.series.name); 
       }, 
        style:{ 
         width:100 
        } 

       } 
      } 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'center', 
      verticalAlign: 'bottom', 
      x: -40, 
      y:40 , 
      floating: true, 
      borderWidth: 1, 
      backgroundColor: '#FFFFFF', 
      shadow: true 
     }, 
     credits: { 
      enabled: false 
     }, 
     series: [{ 
      name: 'Mejor Eps', 
      data: [1000, 950,920,880,850], 
      color: "#FF0000" 
     }, { 
      name: 'Mi Eps', 
      data: [800,770,750,740,730], 
      color: "#000000" 

     }, { 
      name: 'Peor Eps', 
      data: [600,540,535,500,0], 
      color: "#00FF00" 

     }] 
    }); 
}); 

Answer 1

Errore ogni etichetta dati ha una spaziatura e quando si sovrappone all'altra etichetta è nascosta. Quindi è necessario impostare l'opzione padding come 0 e allowOverlap come true.

plotOptions: { 
      bar: { 
       dataLabels: { 
       padding:0, 
       allowOverlap:true, 
        enabled: true, 
        align: 'left', 
        color: '#FFFFFF', 
        inside: true, 
        crop: false, 
        overflow:"none", 
         formatter: function() { 

        return this.series.name+ " "+ this.y; 

        console.log(this.series.name); 
       }, 
        style:{ 
         width:100 
        } 

       } 
      } 
     }, 

http://jsfiddle.net/vj19ukbc/