如何使用Highcharts将现有代码修改为目标样式的条形图？

我尝试使用Highcharts创建简单条形图，参考示例后将代码复制到编辑器却无法运行，同时不清楚如何把当前图表修改为如下截图中的样式，查阅多个Highcharts示例也未找到类似效果。

当前使用的JS代码 #

$(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'}
            
        ],

    });

});

当前使用的HTML代码 #

<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>

内容的提问来源于stack exchange，提问作者newuser