I am trying to show datalabels. but DATALABEL black bar is not displayed. why?
http://jsfiddle.net/o4pt855e/
other columns are displayed. I take this opportunity to ask how I can make a condition? if the value is less than 5, DATALABEL will be displayed on the left, otherwise on the right.
$(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" }] }); });