score:2
Accepted answer
You need to change dataLabels
and not labels
. The Documentation is broken
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
style: {
fontWeight: 500,
}
}
}
},
score:0
it was under the plot options:
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name}: {point.percentage:.1f} %',
style: {
fontWeight: '100',
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'blue'
}
}
}
},
Working example below:
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: '{point.name}: {point.percentage:.1f} %',
style: {
fontWeight: '100',
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'blue'
}
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Chrome',
y: 61.41,
sliced: true,
selected: true
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}, {
name: 'Edge',
y: 4.67
}, {
name: 'Safari',
y: 4.18
}, {
name: 'Sogou Explorer',
y: 1.64
}, {
name: 'Opera',
y: 1.6
}, {
name: 'QQ',
y: 1.2
}, {
name: 'Other',
y: 2.61
}]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
Source: stackoverflow.com
Related Query
- How do I style the series labels on a Highcharts pie chart?
- Highcharts - how to do a responsive pie chart when the texts of the labels are long
- How to make legend labels to bring out the series of a pie chart and not make them disappear when label is clicked in HighCharts?
- How to display the value instead of percentage in a pie chart using jquery Highcharts
- How to hide labels in the highcharts in the pie
- How can I display crosshair labels on top of the chart with Highcharts
- How to change the background series colour of Highcharts Radar chart
- How can I reverse the series order of a pyramid chart in Highcharts
- highcharts donut pie - How to calculate pie size percentages after resize the chart
- How to show circular progress pie chart using the highcharts
- HighCharts API pie chart CSS how to select drilldown labels
- How to display the pie chart legend with proper style so that the chart is visible
- The RTL language (Arabic) is not working with HighCharts pie chart correctly, how can I fix this?
- How to add series to an empty chart without breaking the plot border in highcharts
- How can I maintain the Highcharts halo effect on pie chart after click and mouseOut?
- How to draw a chart from one array of data and make labels on the chart from another array of data? Highcharts v.4.0.4
- Highcharts : How to align column chart and bubble chart vertically in the same series
- HighCharts - Make the pie chart 100% of the div
- Highcharts - labels inside and outside a pie chart
- How can i hide all the Series in highcharts at a time
- How can I remove the white border from HighCharts pie chart?
- How do you increase the performance of highcharts chart creation and rendering
- Highcharts - How to set custom colors for the series
- Highcharts not displaying data labels for Pie chart in arabic
- highcharts - chart names for multiple pie chart series in one chart
- Highcharts Bar Chart - How to set the minimum bar width/length
- How can I delete all of the points from a highcharts series
- Highcharts - Scatter chart with a line connecting the dots in the series
- How get data name in Highcharts pie chart legend instead of "Slice" using array of values?
- Highcharts, How can I change the datalable distance in a pie chart based on the value
More Query from same tag
- Highcharts item width not 100% in carousel
- Highcharts - How to display legend symbol inside the tooltip
- How do I make highcharter use colorIndex number from tidy dataframe
- The use of $watch in directive
- Highlight weekend with a plot band or a zone
- HIghcharts Legend
- Label distance in polar chart is not equal on each angle
- Set highcharts datalabel as dropdown list
- Labels are not rendering for plotLines highcharts
- Highcharts heatmap not rendering squares or rectangles
- Highcharts custom legend SVG symbol does not fade when you click to turn off series
- Set a minimal default range for a column chart in Highcharts
- External JSON into Highcharts Line Graph - Date Parsing Issue
- ReactErrorUtils.invokeGuardedCallback in React fires event repeatedly in IE browser
- To pass dynamic json array to Highcharts Pie Chart
- How to extend yAxis grid Line to full plot area in Highcharts?
- Multi-categories selection Chart in Highcharts
- Highcharts Navigator with a table?
- Overlap bars in highchart's columnrange plot
- Cannot get jQuery UI datepicker to appear on two tabs
- add custom drop down menu in highcharts/highstock
- Highcharts not rendering small dataset
- Highcharts multiple x axis and yaxis. The width of the 1st x-axis is not in sync with browser resize
- Add dynamic data to line chart from mysql database with highcharts
- Highchart - line or area not starting at the left point
- Changing scale on y-axis of highcharts to display time
- How can I dynamically enable/disable series tooltip based on point condition
- Synchronized HighChart: Uncaught TypeError: $(...).appendTo(...).highcharts is not a function
- highmaps get country name on click event
- Convert client requests to proper requests for custom highchart node export server