Highcharts API legend doesnt appear - angularjs

Question

I want to put a legend, but I don´t know why it doesn´t appear. Also, I want to put the database in the fragments of my pie charts.
myapp.controller('myctrl', function ($scope) {
var data = [
['APP Android', 45.0],
['APP Ios', 26.8],
]
$scope.highchartsNG = {
options: {
chart: { type: 'pie'}
},
legend: {
enabled: true
},
series: [ {
name: 'Avisos',
innerSize: '50%'
},
{
name: 'Plataforma',
size: '80%',
innerSize: '65%',
showInLegend: false,
data: data
}],
loading: false
}
});
This example is public in http://jsfiddle.net/Cp73s/2038/

Answer 1

Check this out
var myapp = angular.module('myapp', ["highcharts-ng"]);
myapp.controller('myctrl', function($scope) {
var data = [
['APP Android', 45.0],
['APP Ios', 26.8],
['Widget Web', 12.8],
['MTC BAckoffice', 8.5],
['Correo electrónico', 6.2],
['Facebook', 6.2],
['Twitter', 6.2],
['Teléfono', 6.2],
['Presencial', 6.2],
]
$scope.highchartsNG = {
options: {
chart: {
type: 'pie'
},
plotOptions: {
pie: {
dataLabels: {
distance: -25 //adjust this value to change label distance
}
}
},
},
title: {
text: '550<br>AVISOS',
align: 'center',
verticalAlign: 'middle'
},
legend: {
enabled: true
},
series: [{
name: 'Avisos',
innerSize: '50%'
}, {
name: 'Plataforma',
size: '80%',
innerSize: '65%',
showInLegend: true,
data: data
}],
loading: false
}
});
Fiddles
fiddle with updated label
Fiddle with updated legend display