I would think this would have been a fairly common thing to do but I can't find examples anywhere. I want to compare 3 series of data for 2 different date ranges and see them next to each other in a bar chart. Its easier to understand by the picture: 
Unfortunately, the only thing I can think of is to add a HIDDEN series and then do my legend in html outside of the highchart. Please tell me there is a better way to do this. This is what I have come up with as an example.
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Safe Places To Visit'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Survey Count',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
},
series: {
dataLabels: {
enabled: false
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Recommend',
data: [107, 31, 635, 203, 2]
}, {
name: 'Recommend W/ Comp',
data: [133, 156, 947, 408, 6]
}, {
name: 'Dont Recommend',
data: [973, 914, 4054, 732, 34]
}, {
name: 'HIDDEN',
data: [0, 0, 0, 0, 0]
}, {
name: 'Recommend',
data: [107, 31, 635, 203, 2]
}, {
name: 'Recommend W/ Comp',
data: [133, 156, 947, 408, 6]
}, {
name: 'Dont Recommend',
data: [973, 914, 4054, 732, 34]
}]
});
});
You can see the fiddle here.
