Two columns with two legend items in highchars.js

Question

i need this in highcharts.js:

• two columns
• two items in legeneds - each for column with own colors
• label bottom of each columns

as you can seen on bottom placed image

i have this - jsfiddle - but legends have only one item..

var options = {
   "chart":{
       'renderTo': 'container',
      "type":"column"
   },
   "title":{
      "text":"",
      "style":{
         "display":"none"
      }
   },
   "xAxis":{
      "categories":[
         "Average",
         "Your value"
      ],
      "title":{
         "text":"x label",
         "style":{
            "font":"bold 16px Verdana",
            "color":"#000"
         }
      }
   },
   "yAxis":{
      "min":0,
      "title":{
         "text":"y label",
         "style":{
            "font":"bold 16px Verdana",
            "color":"#000"
         }
      }
   },
   "legend":{
      "align":"center",
      "itemDistance":20,
      "verticalAlign":"top",
      "margin":25,
      "floating":false,
      "borderColor":"#CCC",
      "borderWidth":1,
      "shadow":false,
      "borderRadius":0
   },
   "series":[
      {
         "color":"#0066FF",
         "data":[
            {
               "y":50,
               "color":"#372A4B"
            },
            {
               "y":30,
               "color":"#1EC37A"
            }
         ]
      }
   ]
};

var chart = new Highcharts.Chart(options);

or this - jsfiddle - but no bottom label for each column

var options = {
   "chart":{
       'renderTo': 'container',
      "type":"column"
   },
   "title":{
      "text":"",
      "style":{
         "display":"none"
      }
   },
   "xAxis":{
        "categories":[
         ["Average"],
         ["Your value"]
      ],
      "title":{
         "text":"x label",
         "style":{
            "font":"bold 16px Verdana",
            "color":"#000"
         }
      }
   },
   "yAxis":{
      "min":0,
      "title":{
         "text":"y label",
         "style":{
            "font":"bold 16px Verdana",
            "color":"#000"
         }
      }
   },
   "legend":{
      "align":"center",
      "itemDistance":20,
      "verticalAlign":"top",
      "margin":25,
      "floating":false,
      "borderColor":"#CCC",
      "borderWidth":1,
      "shadow":false,
      "borderRadius":0
   },
      labels: {
            items: [{
                html: "Legend 1",
                style: {
                    top: '10px',
                    left: '20px',
                    height: '30px'
                }
            }, {
                html: "Legend 2",
                style: {
                    top: '10px',
                    left: '120px',
                    height: '30px'
                }
            }]
        },
   "series":[
      {
         "color":"#372A4B",
         "name": "Average",
         "data":[
            {
               "y":50
            }
         ]
      },
      {
         "color":"#1EC37A",
         "name": "Your value",
         "data":[
            {
               "y":30,
            }
         ]
      }
   ]
};

var chart = new Highcharts.Chart(options);

but what i need is exactly as you can see on this image:

Answer 1

See this fiddle. Is that what you are after?

Achieved with:

plotOptions: {
    column: {
        stacking: 'normal'
    }
},

And adding zero onto the stack:

  "series":[
   {
      "color":"#372A4B",
       data: [85, 0],
       name: "Average"
    },
    {
       "color":"#1EC37A",
       data: [0, 63.11],
       name: "Your Value"
    }]

Answer 2

I can get close using stackLabels, but the labels are in the plot area, not outside the axis.

    stackLabels: {
        verticalAlign: 'bottom',
        enabled: true,
        style: {
            fontWeight: 'bold',
            color: 'gray'
        },
        formatter: function () {
            return this.stack;
        }
    },

http://jsfiddle.net/bhlaird/rZKwq/1/