JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src='http://code.highcharts.com/highcharts.js' type='text/javascript'> </script>
<script src='http://code.highcharts.com/modules/exporting.js' type='text/javascript'></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
$('#container').highcharts({
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45,
beta: 0
}
},
title: {
text: 'Total de Ligações por Operadora'
},
subtitle: {
text: ''
},
legend: {
//acrescente a linha abaixo
labelFormat: '{name} ({percentage:.1f}%)',
//acrescente a linha acima
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 50,
y: 35,
floating: true,
shadow: true
},
xAxis: {
categories: ['<?php echo join("','", $data1) ?>'],},
yAxis: {
min: 0,
title: {
text: 'Quantidade'
}
},
plotOptions: {
//ou adicione esse trecho abaixo//////////////////
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y:.1f}%'
}
},
//adicione esse trecho acima////////////
column: { pointPadding: 0.2, borderWidth: 0 }},
series: [{ name: 'Quantidade', data: [1,2,3],
showInLegend: true
}]
});
});