Highcharts Styling Questions - highcharts

Question

I'm hoping for some help on styling a line Highchart.
I'm trying to get the graph here to look like the image:
Example of my graph
But I'm struggling to get the block colour lables?
Any help would be much appreciated!
Thanks
$('#container').highcharts({
chart: {
type: 'line',
plotBackgroundImage: 'images/fibre.jpg',
plotBorderWidth: 0,
/*,
marginRight: 130,
marginBottom: 25*/
},
title:
{
text : strTitle
},
tooltip:
{
enabled: false
},
xAxis:
{
categories: arrXAxis,
title:
{
text: strXTitle
},
},
yAxis:
{
title:
{
text: ''
},
labels: {
formatter: function() {
// return this.value +'?'
return('');
}
},
min: 0,
max: 10,
minorGridLineWidth: 0,
alternateGridColor: null,
gridLineWidth: 0,
plotBands:
[{
from: intRedStart,
to: intRedEnd,
color: 'rgba(229, 28, 36, 0.6)',
label:
{
text: 'High Risk',
style:
{
color: '#606060'
}
}
},
{
from: intAmberStart,
to: intAmberEnd,
color: 'rgba(239, 140, 30, 0.6)',
label:
{
text: 'Improvement',
style:
{
color: '#606060'
}
}
},
{
from: intGreenStart,
to: intGreenEnd,
color: 'rgba(43, 174, 115, 0.6)',
label:
{
text: 'Healthy',
style:
{
color: '#606060'
}
}
}
]
},
legend: {
/*
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0*/
},
series:
[{
allowPointSelect: false,
showInLegend: false,
data: arrData
} /*, {
name: '1',
data: [10]
}, {
name: '2',
data: [0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: '3',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}*/]
});

Answer 1

You can set plotBackgroundImage for chart http://api.highcharts.com/highcharts#chart.plotBackgroundImage and then use plotBands
http://jsfiddle.net/JRhaS/2/
plotBands: [{ // mark the weekend
color: 'rgba(155,255,155,0.5)',
from: 0,
to: 100
},{ // mark the weekend
color: 'rgba(100,255,200,0.5)',
from:100,
to: 200
}],
},

Answer 2

If you look at the API doc for plotband labels, I think you should be able to do something similar to the image by playing around with the "style", "align" and "verticalAlign" properties. Hope this helps :)
Edit: It seems like the background color is not possible to set with the labels.style object. I guess this is because the label is an SVG element (a tspan to be more specific), so it does not support all the css that standard HTML elements does. You can however come closer to your goal by aligning the labels "top" and "left", and set the font color. If you really need the background color you may have a look at this: Background color of tspan element