Develop Reference

HighCharts API pie chart CSS how to select drilldown labels

I have made a pie chart using highcharts and making a chart with the following options
chart: {
type: 'pie',
},
and I added the below options to change the width of the text which forces each word to be on a different line
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name} {point.y}',
style: {
width: 50,
fontSize: '20px',
},
}
}
I try to change the color of the label by adding a color property to the style, but it wont change the color. How would I change the color, as well as the text underline?
This is the label that I am talking about that is on my highcharts pie chart,
Thank you, also a bonus question would be, is there a way that I could make a giant white circle in the middle of the pie chart? sort of like making a hole in a donut?

The label color is configured by dataLabels.color:
plotOptions: {
pie: {
dataLabels: {
enabled: true,
color: 'green', 👈
}
}
}
demo 1
or dataLabels.style.color:
plotOptions: {
pie: {
dataLabels: {
enabled: true,
style: {
color: 'green', 👈
}
}
}
}
demo 2
For a drilldown pie chart, the label color is configured by plotOptions.series.dataLabels.color and series.data[].dataLabels.color (where each data point can have its own color config):
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y:.1f}%',
color: 'green', 👈
}
}
},
series: [
{
name: "Browsers",
colorByPoint: true,
data: [
{
name: "Chrome",
y: 62.74,
drilldown: "Chrome",
dataLabels: {
color: 'green', 👈
}
},
{
name: "Firefox",
y: 10.57,
drilldown: "Firefox",
dataLabels: {
color: 'green', 👈
}
},
//...
]
}
]
demo 3
drilldown.activeDataLabelStyle.color can also be used:
drilldown: {
activeDataLabelStyle: {
color: 'green' 👈
},
}
demo 4

Highcharts pie dropdown showing labels inside the pie

I want to show 2 data labels inside pie charts with drill-down. I know this is possible by overlaying 2 pie with different data labels. However, in the drill down, it's only showing 1 data labels, which is the last one I put (the first data label is being ignored by highcharts).
Here is my attempt:
https://jsfiddle.net/firstlutfi/a3v3mhef/
$('#chart').highcharts({
chart: {
type: 'pie'
},
xAxis: {
type: 'category'
},
tooltip: {
headerFormat: '<span style="font-size:10px">{series.name}</span><br>',
pointFormat: '{point.name}: <b>{point.percentage:.2f}%</b>',
percentageDecimals: 0
},
plotOptions: {
pie: {
size: '80%',
cursor: 'pointer',
data: [{
name: 'Jakarta',
y: 7000000,
drilldown: 'jakarta_sales'
}, {
name: 'New York',
y: 5000000,
},
]
},
},
series: [{
type: 'pie',
name: 'Sales Details',
colorByPoint: true,
dataLabels: {
verticalAlign: 'top',
enabled: true,
color: '#000000',
connectorWidth: 1,
distance: -30,
connectorColor: '#000000',
format: '{point.percentage:.2f}%'
},
},{
type: 'pie',
name: 'Sales Details',
colorByPoint: true,
dataLabels: {
verticalAlign: 'top',
enabled: true,
color: '#000000',
connectorWidth: 1,
distance: 30,
connectorColor: '#000000',
formatter: function () {
return '<b>' + this.point.name + '</b>:<br/> ' + this.y + ' ';
}
}
}],
exporting: {
enabled: true,
},
drilldown: {
series: [
{
name: 'Jakarta Sales',
id: 'jakarta_sales',
data: [
{name:'Car Brand A',
dataLabels: {
verticalAlign: 'top',
enabled: true,
color: '#000000',
connectorWidth: 1,
distance: -30,
connectorColor: '#000000',
format:'{point.percentage:.2f}%'
},
y:800000},
{name:'Car Brand B', y:400000},
]
},
{
name: 'Jakarta Sales',
id: 'jakarta_sales',
data: [
{name:'Car Brand A',
dataLabels: {
verticalAlign: 'top',
enabled: true,
color: '#000000',
connectorWidth: 1,
distance: 30,
connectorColor: '#000000',
format:'{point.name}:<br/> {point.y}'
},
y:800000},
{name:'Car Brand B', y:400000},
]
},]
}
});
Update:
click on the jakarta data, and you'll get this
The result that i want is to have 2 labels in the drilldown. one is the amount (on the outside of the pie), and the percentage (inside the pie).
Is anyone know how to use 2 data labels (inside and outside) every chart including the drill down?
Thank you.

I see you use workaround to render multiple-labels per point by using two pie charts. Problem with that solution is.. you can not drilldown from one pie chart to multiple pie charts (ID's are unique).
Reminder: there is also another solution: Highcharts. Pie chart. DataLabels formatter
In your case, try async-drilldown (see details in drilldown event) instead:
https://jsfiddle.net/BlackLabel/a3v3mhef/77/
Snippets:
create the event:
chart: {
type: 'pie',
events: {
drilldown: function (e) {
this.addSingleSeriesAsDrilldown(e.point, drilldownSeries[0]);
this.addSingleSeriesAsDrilldown(e.point, drilldownSeries[1]);
this.applyDrilldown();
}
}
},
enable drilldown on a point:
data: [{
name: 'Jakarta',
y: 7000000,
drilldown: true // just enabled, no ID
}, {
name: 'New York',
y: 5000000,
}]
setup series references:
var drilldownSeries = [{ ... }, { ... }];

Highcharts - highcharts-3d.js:16 Uncaught TypeError: O is not a function

Hi I'm facing an issue with 3D Pie Chart using highchart.js
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/3d-pie/
-
highcharts-3d.js:16 Uncaught TypeError: O is not a function
$('#container').highcharts
({
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45,
beta: 0
}
},
title: {
text: 'Browser market shares at a specific website, 2014'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
{name:'Firefox',
y:45},
{name:'Firefox123',
y:10}
]
}]
});
any advice? thanks.
Fixed by downloading and changing all source file to latest version.

put the highchart legend to the bottom of the chart and horizontally centered

Im using highchart for my website that requires a chart and It renders good (no problem at all) however, due to conflict requirements, I want the legend to be put on the bottom (below the chart, move it from the right side to the bottom side) and make it horizontally centered anyone knows how to make it? I tried this (refer below)
legend: {
enabled: true,
floating: true,
verticalAlign: 'bottom',
align:'right',
y:40
},
my overall chart code is
$('#chart_portfolio').highcharts({
chart: {
borderColor: '#ff0000',
width: null,
height: null
},
title: {
text: false,
x: -20 //center
},
legend: {
enabled: true,
floating: true,
verticalAlign: 'bottom',
align:'center'
},
xAxis: {
categories: portfolio_creation_date //this is an array
},
yAxis: {
title: {
text: false
},
plotLines: [{
value: 0,
width: 1,
color: '#ff0000'
}]
},
tooltip: {
shared: true,
crosshairs: true
},
series: [{
name: 'Future',
data: portfolio_future, //this is an array
color: '#0f00ff'
}, {
name: 'In Grace Period',
data: portfolio_ingrace_period, //this is an array
color: '#fda800'
}, {
name: 'Arrears',
data: portfolio_in_arrears, //this is an array
color: '#f40404'
}, {
name: 'Good standing',
data: portfolio_good_standing, //this is an array
color: '#4da74d'
}]
}); //end of highcharts
but sadly not working. Please refer below image for a sharp detail.

Simply remove options, to use default ones: http://jsfiddle.net/ctfcnsrL/1/
legend: {
// enabled: true,
// floating: true,
// verticalAlign: 'bottom',
// align:'center'
},

Try this One
legend: {
enabled: true,
floating: true,
verticalAlign: 'bottom',
align:'center',
},
http://jsfiddle.net/ctfcnsrL/

Highchart line chart tooltip issues with large dataset

I have quite a large dataset displaying in a highcharts line chart. Tooltips are enabled but the displaying of the tooltip is quite erratic, especially when zoomed in.
You can see the dataset here: http://jsfiddle.net/ARfcB/2/
$(function () {
$('#container').highcharts({
chart: {
type: 'line',
zoomType: "x"
},
plotOptions: {
line: {
marker: {
enabled: true
},
animation: true
}
},
legend: {
enabled: true,
layout: "vertical",
align: 'right',
verticalAlign: 'middle'
},
tooltip: {
enabled: true,
shared: false
},
xAxis: {
type: "datetime"
},
yAxis: {
title: {
text: 'Up/Down'
},
labels: {
style: {
color: "blue"
}
},
min: 0,
max: 1,
tickInterval: 1,
categories: ['Down', 'Up']
},
credits: {
enabled: false
},
series: "large dataset on jsfiddle page"
});
});
The graph basically shows an up/down value for each series. When the mouse is hovering over the 'down' values, no tooltip displays.
When zooming in its even worse. Tooltips are displayed but for a point other than the one that is hovered over; and never for the 'down' values.
I'm wondering is this just because the dataset is quite large or is it an issue with highcharts itself.
Thanks in advance for the help.

Your data should be sorted via x ascending.