Configure a simple Barchart using Highcharts

Question

I am trying to create simple barchart using Highcharts. I am trying to use this example https://jsfiddle.net/otm0oq2c/3/ to create barchart. Note I tried to insert the same code in editor from jsfiddle but it did not work. My problem is I am not sure how to convert this into

I looked at various highcharts examples but couldn't find similar to my screenshot.

$(function () {
    var colors = ['blue','green','yellow','orange','red'];
    var names = ['First', 'Second','Third','Fourth','Fifth'];
 
    $('#container').highcharts({

        chart: {
            type: 'bar',
        },
        legend: {
            enabled: true,
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            labelFormatter: function() {
                return this.name + " - <span class='total'>"+this.y+"</span>"
            }
        },
        title: {
            text: 'Simple Bar Graph'
        },
        xAxis: {
            categories: ['First', 'Second', 'Third', 'Fourth', , 'Fifth'],
            allowDecimals: false
        },
        yAxis: {
            allowDecimals: false
        },
        plotOptions: {
            series: {
                events: {
                    legendItemClick: function (x) {
                        var i = this.index  - 1;
                        var series = this.chart.series[0];
                        var point = series.points[i];   

                        if(point.oldY == undefined)
                           point.oldY = point.y;

                        point.update({y: point.y != null ? null : point.oldY});
                    }
                }
            }
        },
        legend: {
            labelFormatter: function(){
                return names[this.index-1];
            }
        },
        series: [
            {
                pointWidth:20,
                color: colors[0],
                showInLegend:false,
                data: [
                    {y: 6, name: 'First', color: colors[0]},
                    {y: 7, name: 'Second', color: colors[1]},
                    {y: 9, name: 'Third', color: colors[2]},
                    {y: 1, name: 'Fourth', color: colors[3]},
                    {y: 1, name: 'Fifth', color: colors[4]}
                ]
            },
            {color: 'blue'},
            {color: 'green'},
            {color: 'yellow'},
            {color: 'orange'},
            {color: 'red'}
            
        ],

    });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<h2>How to make this:</h2>
<div id="container" style="height: 300px"></div>
<h2>... look like this:</h2>

Answer 1

The simplest way to create a chart similar to the one in provided screenshot would be by simply splitting your data into separate series, instead of creating a single series with multiple data points. You can also enable dataLabels and format their output using format string templating, so that it fits your requirements:

dataLabels: {
    enabled: true,
    pointFormat: 'Average rank {point.y}'
}

Demo: https://jsfiddle.net/BlackLabel/v96dmz8p/

API:
https://api.highcharts.com/highcharts/plotOptions.bar.color https://api.highcharts.com/highcharts/plotOptions.bar.dataLabels https://api.highcharts.com/highcharts/plotOptions.bar.dataLabels.pointFormat https://api.highcharts.com/highcharts/plotOptions.bar.centerInCategory