CODEWITHSUNDEEP
javascripthighcharts
Jatin Kumar
Jatin Kumar

Reputation: 21

Data label position

Whenever i resize my chart my code will not work.

I want to show all my data labels at the same height but I'm unable to adjust it. All data labels should be above max height which i calculated in the code. Max height is the two times of max data value.Plz help me in it.

Below is my jsfiddle link

Jsfiddle link

var i = 0, max = 0, min = 0;

var val = [-6, 5, 10, 4];
var cat = ['Sep-2016', 'Oct-2016', 'Nov-2016', 'Dec-2016'];
var color = ['#f442d4', '#41f4f1', '#4149f4', '#f49a41'];
var fixed = [];
var variable = [];

var val2= new Array();

for( i=0; i<val.length; i++ )
{
   var str = {y:0, color: ""};
   str.y = val[i];
   str.color = color[i]; 
   val2.push(str); 
}

for(i=0;val[i];)
{
    if(min>val[i])
    min=val[i];

    if(max<val[i])
    max=val[i];

    i++;
}

max=2*max;

if(min<0)
min=2*min;
else
min=0;

for( i=0; i<val.length; i++ )
{
   if(val[i]<0)
   fixed.push(-2);
   else
   fixed.push(2);
}

for( i=0; i<val.length; i++ )
{
   if(val[i]<0)
   {
      variable.push(min-fixed[i]-val[i]);
   }
   else
   {
      variable.push(max-fixed[i]-val[i]-2);
   }
}


var seriesData= [{
    type: 'areaspline',
    color: '#e1e4e8',
    data: val,
    dataLabels:{
    enabled:false
}
  }, {
    type: 'column',
    color: '#bbc1c9',
    data: fixed,
     dataLabels:{
    enabled:false
}
  }, {
    type: 'column',
    color: '#dce0e5',
    data: variable,
    dataLabels:{
    enabled:false
}
  }, {
    type: 'column',
    data: val2,
    dataLabels:{
    enabled:true,
     formatter: function () {
            return "<html><div style='color:black;width:30px;text-align:center;border-radius:4px;padding-top: 5px; height:25px; background:"+this.point.color+";transform:translate(0px,-150px)'>" + this.point.y +"</div></html>";
        },
        useHTML:true,
    }
  }]


Highcharts.chart('container', {

   credits: {
        enabled: false
   },
  chart: {
      backgroundColor: '#f4f7f7'
    },
  legend: {
    enabled: false
  },
  xAxis: {
    categories: cat,
    tickmarkPlacement: 'on',
    title: {
      enabled: false
    },
    tickLength: 0
  },
  yAxis: {
    max: max,
    min: min,
    tickInterval: 2,
    labels: {
          enabled: false
    },
    title: {
          text: '',
    },
  },
  plotOptions: {
    area: {
      stacking: 'normal',
      lineColor: '#FFFFFF',
    },
    series: {
      pointWidth: 5,
      borderWidth: 0,
      stacking: 'normal',
    }
  },
  series: seriesData,
});

Note: max positive value : 160, max negative value : -60

for further reference you can check the below image Image

Upvotes: 0

Views: 283

Answers (1)

Alexandr Kudryashov
Alexandr Kudryashov

Reputation: 631

add at the end this line jQuery('.highcharts-label').css('top','0px');

and update your formater

formatter: function () {
        return "<html><div style='color:black;width:30px;text-align:center;border-radius:4px;padding-top: 5px; height:25px; background:"+this.point.color+";position:absolute;left:-15px'>" + this.point.y +"</div></html>";

https://jsfiddle.net/f3gscp3d/1/

Upvotes: 1

Related Questions