JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
JavaScript
$(function() {
var addSecondLabel = function(chart) {
$('.labelText').remove();
var series = chart.series,
dataLabel, barHeight;
Highcharts.each(series, function(ob, j) {
if (ob.visible) {
Highcharts.each(ob.data, function(p, i) {
if (p.y > 30) {
barHeight = p.graphic.element.height.animVal.value;
dataLabel = p.dataLabel;
chart.renderer.text(p.y, dataLabel.x + chart.plotLeft + barHeight, dataLabel.y + chart.plotTop + 11).attr({
zIndex: 100
}).addClass('labelText').css({
"color": "contrast",
"fontSize": "11px",
"fontWeight": "bold",
"textShadow": "0 0 6px contrast, 0 0 3px contrast"
}).add();
} else if (p.y > 0) {
barHeight = p.graphic.element.height.animVal.value;
dataLabel = p.dataLabel;
p.dataLabel.translate(dataLabel.x + barHeight, dataLabel.y);
}
});
}
});
}
$('#container').highcharts({
chart: {
animation: false,
type: 'bar',
events: {
load: function() {
addSecondLabel(this);
},
redraw: function() {
addSecondLabel(this);
}
}
},
title: {
text: 'Mi EPS'
},
xAxis: {
title: {
text: null
},
labels: {
x: -5,
y: -20,
useHTML: true,
format: '<div style="position: absolute; left: 40px"> my label 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: {
padding: 0,
allowOverlap: true,
enabled:...