How to display several labels in Highchart.js?

Question

I have basic Waterfall chart (HighChart.js) basic Waterfall chart image example

How display two labels on each column? Besides, first label must be at top of column and another label must be on bottom of column. So it should be exactly like on image.

Now I have two ideas:

1. First label is rendered on first chart, second value will be rendered on additional hidden chart (link to example: [ http://jsfiddle.net/gk14kh3q/1/][3] )

    $(function () { $('#container').highcharts({ chart: { type: 'waterfall' }, title: { text: 'Highcharts Waterfall' }, xAxis: { type: 'category' }, yAxis: { title: { text: 'USD' } }, legend: { enabled: false }, series: [{ dataLabels: { enabled: true, // here need align label } }, { dataLabels: { enabled: true, // here need align label } }] }); }); 

2. Combine two label in one by using formatting function and useHTML property. And after that set position to labels by using css or external js

May be some others practices exist? I'll be very pleased for help. Even discussion can be usefull. Thank you!

PS How I could insert icons to chart like on provided image?

Answer 1

You can use chart.renderer.label for adding new dataLabels for your column points. You can also use chart.renderer.image for adding arrows to your chart:

var addLabels = function(chart) {
    $('.custom').remove();
    var series = chart.series[0],
        url;
    Highcharts.each(series.data, function(p, i) {
      if (i) {
        chart.renderer.label(p.secondLabel, p.plotX + chart.plotLeft, p.yBottom + chart.plotTop).attr({
          'text-anchor': 'middle'
        }).addClass('custom').add();
        if (p.y > 0) {
          url = 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Arrow_up.svg/1000px-Arrow_up.svg.png';
        } else {
          url = 'https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png'
        }
        chart.renderer.image(url, p.plotX + chart.plotLeft, chart.plotTop + chart.plotHeight - 15, 8, 13).addClass('custom').add()
      }
    });
};

Here you can find an example how it can work: http://jsfiddle.net/zc2fb8vt/