Arrange the html text inside flag ( HighStock) - html

Question

I have been trying to arrange the text inside the flag element for highstock similar to image below but been struggling for too long.
Was wondering if this is possible and how
Updated in jsfiddle
http://jsfiddle.net/wj9vvq6o/
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data) {
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1
},
title : {
text : 'USD to EUR exchange rate'
},
yAxis : {
title : {
text : 'Exchange rate'
}
},
series : [{
name : 'USD to EUR',
data : data,
id : 'dataseries',
tooltip : {
valueDecimals: 4
}
}, {
type : 'flags',
data : [{
x : Date.UTC(2011, 1, 22),
title : 'A',
text : 'Shape: "squarepin"'
}, {
x : Date.UTC(2011, 3, 28),
title : 'Test Name goes here <br> Test 2 goes here',
text : 'Shape: "squarepin"'
}],
onSeries : 'dataseries',
shape : 'squarepin',
width : 140
}, {
type : 'flags',
data : [{
x : Date.UTC(2011, 2, 1),
title : 'B',
text : 'Shape: "circlepin"'
}, {
x : Date.UTC(2011, 3, 1),
title : 'B',
text : 'Shape: "circlepin"'
}],
shape : 'circlepin',
width : 16
}, {
type : 'flags',
data : [{
x : Date.UTC(2011, 2, 10),
title : 'C',
text : 'Shape: "flag"'
}, {
x : Date.UTC(2011, 3, 11),
title : 'C',
text : 'Shape: "flag"'
}],
color : Highcharts.getOptions().colors[0], // same as onSeries
fillColor : Highcharts.getOptions().colors[0],
onSeries : 'dataseries',
width : 16,
style : {// text style
color : 'white'
},
states : {
hover : {
fillColor : '#395C84' // darker
}
}
}]
});
});
});
This is all i have managed - i need to add the number 100 beside it

Answer 1

You can try to set a useHTML flag in series object. Then arrange your content by HTML elements and CSS styles.
series:
{
useHTML:true,
dataLabels:{
useHTML:true,
},
type : 'flags',
data : [{
x : Date.UTC(2011, 1, 22),
title : 'A',
text : 'Shape: "squarepin"'
}, {
x : Date.UTC(2011, 3, 28),
title : '<span style="text-align:right;width:100%;display:block;">Test Name goes here </span>100 <br><span style="text-align:right;width:100%;display:block;">Test 2 goes here</span>',
text : 'Shape: "squarepin"'
}],
onSeries : 'dataseries',
shape : 'squarepin',
width : 140
},
Simple example: http://jsfiddle.net/wj9vvq6o/4/