Sample Code
JsFiddle Example for below code.
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares in January, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [
{
"name": "Display",
"y": 0.1,
"value": 5
},
{
"name": "Paid Social",
"y": 0,
"value": 0,
sliced: true,
selected: true
},
{
"name": "Direct",
"y": 14.5,
"value": 559
},
{
"name": "Referral",
"y": 2,
"value": 77
},
{
"name": "Email",
"y": 4,
"value": 152
},
{
"name": "Other",
"y": 0,
"value": 1
},
{
"name": "Organic Search",
"y": 23.4,
"value": 901
},
{
"name": "Meta Search",
"y": 0.2,
"value": 5
},
{
"name": "Organic Social",
"y": 2.4,
"value": 93
},
{
"name": "Directory",
"y": 0.2,
"value": 9
},
{
"name": "Other Advertising",
"y": 0.1,
"value": 3
},
{
"name": "OTA Referral Traffic",
"y": 0.7,
"value": 26
},
{
"name": "Paid Search",
"y": 27.8,
"value": 1068
},
{
"name": "Local",
"y": 24.5,
"value": 941
}]
}]
});
Scenario
I want to display dataLabels for all even y value is zero.
In Above code We have "name": "Display"
y=0.1 but still it is not displaying in Pie Chart don't know why. If any one have idea about this problem please let me know.
The dataLabels
are hidden due to lack of space and overlapping. As a solution you can set: padding: 0
plotOptions: {
pie: {
...,
dataLabels: {
padding: 0,
...
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/g5s27tyb/
API Reference: https://api.highcharts.com/highcharts/plotOptions.pie.dataLabels.padding