How to add texts to a graph in Highcharts

Question

I am using highcharts and I want to achieve the same graph that you can see below (negative bars). You can see the code of what I have. How can I add the texts in grey at the side of the last bar? (light green bar). I would also like to get rid of 0% that somehow I get in the second bar. Thanks in advance.

$(function () {
    $('#emmisions2015_2050').highcharts({

        chart: {
            type: 'column'
        },

        title: {
            text: ''
        },

        xAxis: {
            opposite: true,
            categories: ['Transport', 'Purchased Electricity', 'Direct Emissions']
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + this.y + '<br/>' +
                    'Total: ' + this.point.stackTotal;
            }
        },

        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    rotation: 0,
                    align: 'right',
                    style: {
                        textOutline: false 
                    },
                     borderWidth: 1,
                     formatter: function() {
                       if (this.point.isInside == true) {
                         return '<span style="color: white">' + this.y + '%</span>';
                       } else {
                         return '<span style="color: black">' + this.y + '%</span>';
                       }
                     }
                }
            },
            column: {
                stacking: 'normal',
                format: '{point.x:.1f} Billion Euro'
            }
        },

        series: [{
            name: 'Emerging & Breakthrough',
            data: [0, 0, { y: -5, color: '#8cc640'}]
        },{
            name: 'Demand-side Flexibility',
            data: [0, 0, { y: -2, color: '#8cc640'}]
        },{
            name: 'Fuel Switch',
            data: [0, 0, { y: -8, color: '#8cc640'}]
        },{
            name: 'Energy Efficiency',
            data: [{ y: -4, color: '#51a332'},{ y: -11, color: '#26b6cc'},{ y: -7, color: '#8cc640'}]
        }]
    });
});

#emmisions2015_2050 .highcharts-legend{
    display: none;
}
.highcharts-button, .highcharts-axis, .highcharts-credits{
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div class="emisions" id="emmisions2015_2050"></div>

Answer 1

You can achieve this effect by adding opposite yAxis to your chart, and creating some function, which defines how labels will look on this axis, and from where they will take a names. Take a look at code below:

var tickPositions = [-19, -16, -12, -4],   // Define here positions of labels (position point can't be equal than extreme points of axis)
    extremes = chart.yAxis[0].getExtremes(),
    counter = 0,

createTicks = function(ticks, axisExtremes) {
    var ticksArray = [axisExtremes.min, ...ticks, axisExtremes.max];
    return ticksArray;
    };

chart.yAxis[1].setExtremes(extremes.min ,extremes.max);

chart.yAxis[1].update({
    tickPositions: createTicks(tickPositions, extremes),
labels: {
    formatter: function() {

        if(this.value === extremes.min) {
            return;
        } else if(counter < tickPositions.length) {
            return this.chart.series[counter++].name;
        } else if(this.value === extremes.max) {
            counter = 0
            return;
        }

    },
    style: {
        "color": "#aaa",
        "font-weight": "bold"
    }
}

})

If you want to see, how it works live, here is JSFiddle

Answer 2

You can remove 0's and set x property for the points - it will remove unnecessary labels.

name: 'Emerging & Breakthrough',
data: [{
  x: 2,
  y: -5,
  color: '#8cc640'
}]

You can add text on the right as plot line labels, see plotLines.label.

You shoudn't hide elements via CSS but with the Highcharts API, e.g. credits, legend can be disabled via enabled: false property.

Live example and output

https://jsfiddle.net/bb83jw29/