CODEWITHSUNDEEP
javascriptjquerychartshighcharts
SnakeFoot
SnakeFoot

Reputation: 174

How to render overall data labels using highcharts?

I'm having trouble displaying the targets variable for the data labels in the chart shown below. For some reason the series data labels display only the targetsAdjvalue. I tried adding stacked labels on the y-axis but it didn't work. How else can this be done?

ar targets =  [<?php echo $gg[0][24].",".$gg[0][20].",".$gg[0][26].",".$gg[0][22].""; ?>],
mcbf =  [ <?php echo $gg[0][16].",".$gg[0][17].",".$gg[0][18].",".$gg[0][19].""; ?>],
targetsAdj = [],
attagg=[],
calc,
calc2;
for (var i=0;i<targets.length;i++) {
  calc = targets[i] >= mcbf[i] ? targets[i] - mcbf[i] : 0;
  targetsAdj.push(calc);
}
for (var i=0;i<mcbf.length;i++) {
  calc2 = (mcbf[i]/targets[i])>=0.7 ? {y:mcbf[i],color:'#1de9b6',borderColor:'#00bfa5'} : ((mcbf[i]/targets[i])>=0.4 ? {y:mcbf[i],color:'#ffeb3b',borderColor:'#fdd835'}:{y:mcbf[i],color:'tomato',borderColor:'#d84315'});
  attagg.push(calc2);
}
$('#attivazioni').highcharts(
{
  "colors": 
  ["tomato"
  , "lime"
  , "rgba(139,188,33,.5)"
  , "rgba(145,0,0,.5)"
  , "rgba(26,173,206,.5)"
  , "rgba(73,41,112,.5)"
  , "rgba(242,143,67,.5)"
  , "rgba(119,161,229,.5)"
  , "rgba(196,37,37,.5)"
  , "rgba(166,201,106,.5)"],

  "chart": {
    "zoomType": "x",
    "showAxis": true,
    "alignTicks": true,
//"height": 300,
"style": {
  "fontFamily": "Helvetica, Arial, sans-serif",
  "color": "#333"
},
"backgroundColor": "#ffffff"
},
"title": {
  "text": " "
},
"xAxis": [{
  "tickmarkPlacement": "on",
  "labels": {
    "style": {
      "fontSize": "10px",
      "color": "#333"
    },
    "useHTML": true
  },
  "gridLineColor": "lightgrey",
  "gridLineWidth": 0,
  "categories": ["<span style=\"font-size:12px\"><b>Lead</span>"
  , "<span style=\"font-size:12px\"><b>Lvc</span>"
  , "<span style=\"font-size:12px\"><b>Push</span>"
  , "<span style=\"font-size:12px\"><b>AddOn</span>"]
}],
"yAxis": [{
  "alternateGridColo": "null",
  "minorTickInterval": "auto",
  "lineColor": '#000',
  "tickWidth": "1",
  "tickColor": '#000',
  "gridLineColor": "#C0C0C0",
  "gridLineWidth": 1,
  "lineColor": "#C0C0C0",
  "lineWidth": 1,
  "endOnTick": true,
  "min": 0,
  "labels": {
    "formatter": function () {
      return '%' + this.axis.defaultLabelFormatter.call(this);
    } ,
    "style": {
      "fontSize": "10px",
      "color": "black"
    }
  },
  stackLabels: {
    enabled: true,
    style: {
      fontWeight: 'bold',
      color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
    },
    formatter: function() {
      return  Highcharts.numberFormat(this.total, 2, ',');
    }
  },
  title: {
    text: '',
    style: {
      display: 'none'
    }
  },
  subtitle: {
    text: '',
    style: {
      display: 'none'
    }
  },
}],
"legend": {
  "enabled": false
},
"navigation": {
  "buttonOptions": {
    "enabled": false
  }
},
"plotOptions": {
  "series": {
    "dataLabels": {
      "enabled": true,
      "style": {
        "color": "#333"
      },
      "crop": false,
      "overflow": "none"
    },
    "shadow": false,
    "marker": {
      "enabled": false
    }
  },
  "column": {
    "grouping": false,
    "stacking": "percent",
    "shadow": false
  }
},
"credits": {
  "enabled": false
},
"tooltip": {
  "enabled": false,
  "shared": true,
  "valueDecimals": 0
},
"series": [{
  "name": "Target",
  "type": "column",
  "color": "rgba(140, 131, 131, 0.49)",
  "borderColor": "#B0BEC5",
  "borderWidth": 2,
  "data": targetsAdj,
  "dataLabels": {
    y:-18,
    verticalAlign:'top',
    "formatter": function() {
      if (this.series.index == 0) return targets[this.point.x];
      else return this.y;
    }
  }
},{
  "name": "SELLS",
  "type": "column",
  "data": attagg,
  "color": "#1de9b6",
  "borderColor": "grey",
  "borderWidth": 2,
  "zIndex": 10
} ]
});

enter image description here

Upvotes: 1

Views: 59

Answers (1)

SnakeFoot
SnakeFoot

Reputation: 174

i resolved by setting series datalabels to false. and changing yaxis settings to :

yAxis: {
  min: 0,
  max: 105,
  endOnTick: false,
  title: {
    text: null
  },
  stackLabels: {
enabled: true,
style: {
  fontWeight: 'bold',
  color: 'black'
}
}
},

Upvotes: 2

Related Questions