Highcharts: structure legend by subtitles - highcharts

Question

I was playing around with Highcharts the last days.
One thing, I couldn't find out, is if it is possible to include subtitles to the legend to structure the results.
In my example: http://jsfiddle.net/gWEtB/
var allData={
products: ["Product1", "Product2", "Product3", "Product4"]
}
var colors={
'own': ['#3B14AF', '#422C83', '#210672', '#886ED7'],
'comp': ['#E7003E', '#AD2B4E', '#960028', '#F33D6E', '#F36D91'],
'new': '#00CC00'}
`$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Product Switching'
},
xAxis: {
categories: allData.products
},
yAxis: {
min: 0,
title: {
text: ''
},
labels:{
format:'{value} %'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.0f}%</b><br/>',
shared: false
},
plotOptions: {
column: {
stacking: 'percent',
dataLabels: {
enabled: true,
formatter: function(){
return this.percentage.toFixed(2)+' %';
},
color:'#FBF5EF'
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 30,
},
series: [{
name: 'Own product1',
data: [5, 3, 4, 7],
color: colors.own[0]
},
{
name: 'Own product2',
data: [5, 3, 4, 7],
color: colors.own[1]
},
{
name: 'Own product3',
data: [5, 3, 4, 7],
color: colors.own[2]
},
{
name: 'Own product4',
data: [5, 3, 4, 7],
color: colors.own[3]
},
{
name: 'Competitor 1',
data: [2, 2, 3, 2],
color: colors.comp[0]
},
{
name: 'Competitor 2',
data: [2, 2, 3, 2],
color: colors.comp[1]
},
{
name: 'Competitor 3',
data: [2, 2, 3, 2],
color: colors.comp[2]
},
{
name: 'Competitor 4',
data: [2, 2, 3, 2],
color: colors.comp[3]
},
{
name: 'Competitor 5',
data: [2, 2, 3, 2],
color: colors.comp[4]
}, {
name: 'Market Potential',
data: [3, 4, 4, 2],
color: colors.new
}]
});
});
I look for a way to add subtitles to the legend in this way:
Cannibalization:
o Own product 1
o Own product 2
o Own product 3
o Own product 4
Competition:
o Competitor 1
o Competitor 2
o ...
I am thankful for all help and information.
thx

Answer 1

You can use labelFormatter http://api.highcharts.com/highcharts#legend.labelFormatter
Simple example: http://jsfiddle.net/gWEtB/1/
labelFormatter: function() {
switch(this.name)
{
case 'Own product1':
return 'Cannibalization<br/>'+ this.name;
break;
case 'Competitor 1':
return this.name + '<br/>Competition';
break;
case 'Market Potential':
return this.name + '<br/>Market title';
break;
default:
return this.name;
break;
}
}