Search code examples
highchartspositionaxis

Update DataLabels position on Highcharts


when I use dataLabel.translate command to update DataLabels position is working fine, but if I use a yAxis[i].update command, Highcharts is not Moving anymore any DataLabels.

If you pick Update data, Data Labels do NOT move, otherwise they move correctly. fiddle example

var chart = new Highcharts.Chart({
  chart: {
    renderTo: 'container',
    type:'column',        
    events:
    {
        load: function(){
            for(var j = 0; j < this.series.length; j++) {
                for(var i = 0; i < this.series[j].data.length; i++) {
                    var d = this.series[j].data[i];
                    d.dataLabel.translate(d.dataLabel.x, d.dataLabel.y-50);
                }
            }
        }
    }        
  },
  plotOptions: { series: {dataLabels: {enabled: true} } },    
  xAxis: {categories: ['Jan', 'Feb', 'Mar', 'Apr']},    
  yAxis: {max: 100, min:0},    
  series: [{data: [60, 70, 45, 85]}]} , function(chart){
if(confirm('Update on YAxis?'))
{
  chart.yAxis[0].update({
      max: 500,
      min: 50,
      tickInterval: 50
  });
}});

Any ideas how can I still updating Yaxis Data and changing DataLabels positions?


Solution

  • If change the event from load to render, function from translate to attr and d.dataLabel.y to d.dataLabel.alignAttr.y the code will work:

        events: {
          render: function() {
            for (var j = 0; j < this.series.length; j++) {
              for (var i = 0; i < this.series[j].data.length; i++) {
                var d = this.series[j].data[i];
                d.dataLabel.attr({
                  y: d.dataLabel.alignAttr.y - 50
                });
              }
            }
          }
        }
      },
    

    Live demo: http://jsfiddle.net/BlackLabel/LL4z4eL5/

    By the way, an easier way of doing the same thing is by using dataLabels.y property: http://jsfiddle.net/BlackLabel/tpor20xa/