score:2

Accepted answer

Complete the categories as:

categories: [
                    'Tokyo',
                    'New York',
                    'London',
                    'Berlin'
                ]

then the stacking option as:

plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    stacking: 'normal'
                }
            }

Then your data in series as:

series: [{
                name: 'Tokyo',
                data: [49.9,null,null,null]

            }, {
                name: 'New York',
                data: [null,83.6,null,null],


            }, {
                name: 'London',
                data: [null,null,48.9,null]

            }, {
                name: 'Berlin',
                data: [null,null,null,42.4]

            }]

Here you have the Fiddle:

http://jsfiddle.net/TU7TL/1/

Alternatively you can do it using only one serie, and putting all your data in the serie array like that:

series: [{
            name: 'Measure',
            data: [{y:49.9, color: colors[0]},{y:83.6, color: colors[1]},{y:48.9, color: colors[2]},{y:42.4,color: colors[3]}]

        }]
    });

With this last method you have to specify the different colors in the same serie. previously I declare and use a variable "colors", to get the colors from Highchart:

var colors = Highcharts.getOptions().colors;

The fiddle Example is here: http://jsfiddle.net/TU7TL/4/


Related Articles