Treemap datalabel align
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/treemap.js"></script>
<div id="container"></div>
CSS
#container {
width: 300px;
width: 600px;
margin: 0 auto;
}
JavaScript
$(function () {
$('#container').highcharts({
"chart": {
type: "treemap"
},
series: [{
dataLabels: {
enabled: true,
allowOverlap: false
},
data: [{
'name': 'Americas',
'value': 52976,
'color': 'rgba(47,126,216,1)',
dataLabels: {
align: 'left',
verticalAlign: 'top'
}
}, {
'name': 'Australia',
'value': 41219,
'color': 'rgba(13,35,58,1)'
}, {
'name': 'Europe',
'value': 62756,
'color': 'rgba(139,188,33,1)',
dataLabels: {
align: 'right',
verticalAlign: 'top'
//, style: { opacity: 1 }
}
}, {
'name': 'Asia',
'value': 14577,
'color': 'rgba(145,0,0,1)'
}, {
'name': 'USA',
'value': 23178,
'color': 'rgba(26,173,206,1)'
}, {
'name': 'France',
'value': 12880,
'color': 'rgba(73,41,112,1)'
}, {
'name': 'Germany',
'value': 11801,
'color': 'rgba(242,143,67,1)'
}]
}]
});
});