How to create a single series bar graph with Highcharts

Question

I'm trying to create a simple Highcharts bar graph with a single series and multiple labels in the legend. How is this done?

Here is an example:

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

    series: [
        {
            data: [
                {y: 6, name: 'First', color: 'blue'},
                {y: 7, name: 'Second', color: 'green'},
                {y: 9, name: 'Third', color: 'yellow'},
                {y: 1, name: 'Fourth', color: 'orange'},
                {y: 1, name: 'Fifth', color: 'red'}
            ]
        }
    ],

});

Answer 1

A simpler way than the accepted answer is by setting the categories key as an array of 'labels' and the series.data as an array of 'values'.

Here is an example that uses a collection (Array of objects) or a flat object to populate a bar chart in Highcharts (jsfiddle):

The example assumes a an array of objects with keys name/value, or a simple object of key/value:

var chart = Highcharts.chart('container', {

    title: {
        text: 'Simple Bar'
    },

    chart: {type: 'bar'},

     xAxis: {
     // categories: Object.keys(obj)
     // or
        categories: collection.map(i => i.name)
    }, 

        series: [{
        name: 'Usage',
        colorByPoint: true,
     // data: Object.values(obj)
     // or:
        data: collection.map(i => i.value)
    }],
    legend: false
});

Answer 2

Luckily, Highcharts is pretty flexible. We can do some tricks (maybe hacks?) to achieve this kind of "non-convential" tasks.

What you could do in your case is create "fake" serieses, and use custom event handlers:

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

    ],

In order to format the legend labels we can use labelFormatter for the legend:

    legend: {
        labelFormatter: function(){
            return names[this.index-1];
        }
    },

this will set the legend label to the name of the corresponding point.

And finally we need to handle the legend click, to imitate the "normal" behaviour:

    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});
                }
            }
        }
    },

These are just examples, you can obviously improve this and adjust to your own need.

Good Luck!

http://jsfiddle.net/otm0oq2c/3/