Reputation: 2018
I was wondering if anyone was able to create a bar chart with labels like the pie chart? I need to be able to create the labels outside and create that line to them. Just like the pie chart does here:
http://www.highcharts.com/demo/pie-basic
I have a basic bar chart (using it as a progress bar). I need to create the labels on the outside because the sections might get really small. Here is my JSFiddle: http://jsfiddle.net/rLYj4/5
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: '<b>Total</b><br/><b>$100.00</b>'
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
xAxis: {
labels: {
enabled: false
},
gridLineWidth: 0,
minorGridLineWidth: 0,
gridLineColor: 'transparent',
startOnTick: false
},
yAxis: {
minorGridLineWidth: 0,
gridLineWidth: 0,
gridLineColor: 'transparent',
labels: {
enabled: false
},
title: {
text: ''
}
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: 'white'
}
}
},
series: [{
name: 'Category 1',
data: [50.00]
}, {
name: 'Category 2',
data: [25.00]
}, {
name: 'Category 3',
data: [12.50]
}, {
name: 'Category 4',
data: [12.50]
}]
});
});
Does anyone know how to accomplish this?
Thanks, Joshua
Upvotes: 0
Views: 498
Reputation: 37578
Unfortuantely this option is not supported, but you can post your suggestion on the website: http://highcharts.uservoice.com/forums/55896-general
Upvotes: 0