We Keep Coding

Highcharts - Plot a double donut chart on drilldown level

I plotted a double donut chart using Highcharts library. My requirement is when I drill down from the initial level, I should be able to plot another double donut chart.
For eg: This is the initial level. Now if I click on Email, it should drill down and show another double donut chart
This is the desired result after drill down
Following is the current code to render chart. For each series data, we have drilldown option which can take a string for eg: 'Email'. I need double donut under the drilldown but drilldown series with same id don't work and I end up getting only 1 donut chart.
Highcharts.chart('container', {
chart: {
type: 'pie',
/* backgroundColor: '#000', */
},
title: {
text: '',
},
subtitle: {
text: '',
},
accessibility: {
announceNewData: {
enabled: true,
},
point: {
valueSuffix: '%',
},
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y:.1f}%',
},
},
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat:
'<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>',
},
series: [
{
innerSize: 150,
size: 200,
name: 'Browsers',
colorByPoint: true,
data: [
{
name: 'Email',
y: 62.74,
drilldown: 'Email',
},
{
name: 'Social Media',
y: 10.57,
drilldown: 'Social Media',
},
{
name: 'Shopping',
y: 7.23,
drilldown: 'Shopping',
},
{
name: 'Trading',
y: 5.58,
drilldown: 'Trading',
},
{
name: 'Others',
y: 4.02,
drilldown: 'null',
},
],
},
{
showInLegend: false,
dataLabels: {
enabled: false,
},
innerSize: 100,
size: 150,
name: 'Email',
colorByPoint: true,
data: [
{
name: 'Email',
y: 52.74,
drilldown: null,
},
{
name: 'Social Media',
y: 15.57,
drilldown: null,
},
{
name: 'Shopping',
y: 12.23,
drilldown: null,
},
{
name: 'Trading',
y: 5.58,
drilldown: null,
},
{
name: 'Other',
y: 4.02,
drilldown: null,
},
],
},
],
drilldown: {
series: [
{
innerSize: 150,
size: 200,
name: 'Email',
id: 'Email',
data: [
['Gsuite', 0.1],
['office365', 1.3],
['Yahoo', 53.02],
],
},
{
innerSize: 100,
size: 150,
name: 'Email',
id: 'Email',
data: [
['user1', 0.1],
['user2', 1.3],
['user3', 53.02],
],
},
],
},
});
This is the current result
Here is the jsfiddle which I am currently working on.
Any help on this will be much appreciated.
Thanks

how to show legend in PIE chart from chart to pie drilldown highcharts

I want to know how can i show legend for the pie chart, i currently done a column to pie chart drilldown but for the pie chart there is no legend and i want to know how can i put it?
I tried putting legend = true but it is still not showing in the pie chart.
I have also tried:
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
my code below:
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Chart showing the total vs match dialogs'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: ''
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
formatter: function () {
var mychart = $('#container').highcharts();
var mytotal = 0;
for (i = 0; i < mychart.series.length; i++) {
if (mychart.series[i].visible) {
mytotal = {!! $countTotalRecord['low confidence'] !!} + {!! $countTotalRecord['no answer'] !!} + {!! $countTotalRecord['missing intent'] !!} + {!! $countTotalRecord['webhook fail'] !!};
}
}
var pcnt = (this.y / mytotal) * 100;
return Highcharts.numberFormat(pcnt) + '%';
}
}
}
},
tooltip: {
// headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '{point.name}: <b>{point.y}</b>'
},
credits:{
enabled:false
},
series: [{
name: 'front',
colorByPoint: true,
data: [{
name: 'Total',
y: {!! $countTotalRecord['total'] !!},
drilldown: 'total'
}, {
name: 'Match',
y: {!! $countTotalRecord['match'] !!},
drilldown: 'match'
}]
}],
drilldown: {
series: [{
name: 'total',
id: 'total',
type:'pie',
data: [
[
'Low Confidence',
{!! $countTotalRecord['low confidence'] !!}
],
[
'No Answer',
{!! $countTotalRecord['no answer'] !!}
],
[
'Missing Intent',
{!! $countTotalRecord['missing intent'] !!}
],
[
'Webhook Fail',
{!! $countTotalRecord['webhook fail'] !!}
]
]
}]
}
});

You have to use
events: {
drilldown: function(e) {
this.options.legend["enabled"] = true; //legend shows
},
drillup: function(e) {
this.options.legend["enabled"] = false; //legend hides
},
}
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'column',
events: {
drilldown: function(e) {
this.options.legend["enabled"] = true;
},
drillup: function(e) {
this.options.legend["enabled"] = false;
},
}
},
title: {
text: 'Browser market shares. January, 2015 to May, 2015'
},
subtitle: {
text: 'Click the columns to view versions. Source: netmarketshare.com.'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
},
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33,
drilldown: 'Microsoft Internet Explorer'
}, {
name: 'Chrome',
y: 24.03,
drilldown: 'Chrome'
}, {
name: 'Firefox',
y: 10.38,
drilldown: 'Firefox'
}, {
name: 'Safari',
y: 4.77,
drilldown: 'Safari'
}, {
name: 'Opera',
y: 0.91,
drilldown: 'Opera'
}, {
name: 'Proprietary or Undetectable',
y: 0.2,
drilldown: null
}],
dataLabels: {
enabled: false,
}
}],
drilldown: {
series: [{
type: 'pie',
name: 'Microsoft Internet Explorer',
id: 'Microsoft Internet Explorer',
data: [
[
'v11.0',
24.13
],
[
'v8.0',
17.2
],
[
'v9.0',
8.11
],
[
'v10.0',
5.33
],
[
'v6.0',
1.06
],
[
'v7.0',
0.5
]
]
}, {
type: 'pie',
name: 'Chrome',
id: 'Chrome',
data: [
[
'v40.0',
5
],
[
'v41.0',
4.32
],
[
'v42.0',
3.68
],
[
'v39.0',
2.96
],
[
'v36.0',
2.53
],
[
'v43.0',
1.45
],
[
'v31.0',
1.24
],
[
'v35.0',
0.85
],
[
'v38.0',
0.6
],
[
'v32.0',
0.55
],
[
'v37.0',
0.38
],
[
'v33.0',
0.19
],
[
'v34.0',
0.14
],
[
'v30.0',
0.14
]
]
}, {
type: 'pie',
name: 'Firefox',
id: 'Firefox',
data: [
[
'v35',
2.76
],
[
'v36',
2.32
],
[
'v37',
2.31
],
[
'v34',
1.27
],
[
'v38',
1.02
],
[
'v31',
0.33
],
[
'v33',
0.22
],
[
'v32',
0.15
]
]
}, {
type: 'pie',
name: 'Safari',
id: 'Safari',
data: [
[
'v8.0',
2.56
],
[
'v7.1',
0.77
],
[
'v5.1',
0.42
],
[
'v5.0',
0.3
],
[
'v6.1',
0.29
],
[
'v7.0',
0.26
],
[
'v6.2',
0.17
]
]
}, {
type: 'pie',
name: 'Opera',
id: 'Opera',
data: [
[
'v12.x',
0.34
],
[
'v28',
0.24
],
[
'v27',
0.17
],
[
'v29',
0.16
]
]
}]
}
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

...
legend: {
enabled: true
},
...

Highchart drilldown to simultaneous multiple series and y-axis

Hello I would like to use HighChart package and make JS figures with drilldown capability that
1. Show multiple series at drilled-down level at the same time.
2. Use multiple (say 2) y-axis to indicate the different units from these series at the drilled-down level.
Based on the starting point of the code:
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Browser market shares. January, 2015 to May, 2015'
},
subtitle: {
text: 'Click the columns to view versions. Source: netmarketshare.com.'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33,
drilldown: 'Microsoft Internet Explorer'
}, {
name: 'Chrome',
y: 24.03,
drilldown: 'Chrome'
}, {
name: 'Firefox',
y: 10.38,
drilldown: 'Firefox'
}, {
name: 'Safari',
y: 4.77,
drilldown: 'Safari'
}, {
name: 'Opera',
y: 0.91,
drilldown: 'Opera'
}, {
name: 'Proprietary or Undetectable',
y: 0.2,
drilldown: null
}]
}],
drilldown: {
series: [{
name: 'Microsoft Internet Explorer',
id: 'Microsoft Internet Explorer',
categories: ['v11','v8','v9','v10','v7'],
type: 'spline',
data: [
['v11',25],
['v8',17],
['v9',8],
['v10',5],
['v7',3]]
}, {
name: 'Chrome',
id: 'Chrome',
data: [
['v40.0',5],
['v41.0',4.32],
['v42.0',3.68]
]
}]
}
});
});
http://jsfiddle.net/h5xjp8h5/2/
with three js source code:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
But when i make the drilldown part code like the following:
drilldown: {
series: [{
name: 'Microsoft Internet Explorer',
id: 'Microsoft Internet Explorer',
type: 'spline',
data: [
['v11',25],
['v8',17],
['v9',8],
['v10',5],
['v7',3]]
}, {
name: 'Microsoft Internet Explorer Cost',
id: 'Microsoft Internet Explorer',
type: 'spline',
yAxis: 1,
data: [
['v11',50],
['v8',40],
['v9'60],
['v10',65],
['v7',73]]
}, {
name: 'Chrome',
id: 'Chrome',
data: [
['v40.0',5],
['v41.0',4.32],
['v42.0',3.68]
]
}]
}
With y-axis part:
yAxis: [{
title: {
text: 'Total percent market share'
}
},
{
title: {
text: 'cost'
},
opposite: true
}],
http://jsfiddle.net/h5xjp8h5/3/
It did not work.
Could someone please help me on this: 1) I want drill down on Microsoft Internet Explore into a view with two spline series, one with version usage and the other with version cost. 2) i want those two series in. 3) using two y-axis.
Thank you very much in advance.

You can use drilldown event callback function for add new series as your drilldown:
drilldown: function(e) {
var chart = this,
drilldowns = chart.userOptions.drilldown.series,
series = [];
e.preventDefault();
Highcharts.each(drilldowns, function(p, i) {
if (p.id.includes(e.point.name)) {
chart.addSingleSeriesAsDrilldown(e.point, p);
}
});
chart.applyDrilldown();
}
You can use addSingleSeriesAsDrilldown(), method similar to: http://api.highcharts.com/highcharts#Chart.addSeriesAsDrilldown
But you can add multiple series as drilldown with this method.
Here you can see an example how it can work:
http://jsfiddle.net/h5xjp8h5/10/
Kind regards.

Highcharts access drilldown data from event click

I am trying to display the drilldown series pie chart data on click. I'm able to display the pie chart series name the user clicks on but not the drill down data.
Here is an example:
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'pie'
},
title: {
text: 'Browser market shares. January, 2015 to May, 2015'
},
subtitle: {
text: 'Click the slices to view versions. Source: netmarketshare.com.'
},
plotOptions: {
series: {
events:{
click: function (event) {
alert(event.point.name)
}
},
dataLabels: {
enabled: true,
format: '{point.name}: {point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33,
drilldown: 'Microsoft Internet Explorer'
}, {
name: 'Chrome',
y: 24.03,
drilldown: 'Chrome'
}, {
name: 'Firefox',
y: 10.38,
drilldown: 'Firefox'
}, {
name: 'Safari',
y: 4.77,
drilldown: 'Safari'
}, {
name: 'Opera',
y: 0.91,
drilldown: 'Opera'
}, {
name: 'Proprietary or Undetectable',
y: 0.2,
drilldown: null
}]
}],
drilldown: {
series: [{
name: 'Microsoft Internet Explorer',
id: 'Microsoft Internet Explorer',
data: [
['v11.0', 24.13],
['v8.0', 17.2],
['v9.0', 8.11],
['v10.0', 5.33],
['v6.0', 1.06],
['v7.0', 0.5]
]
}, {
name: 'Chrome',
id: 'Chrome',
data: [
['v40.0', 5],
['v41.0', 4.32],
['v42.0', 3.68],
['v39.0', 2.96],
['v36.0', 2.53],
['v43.0', 1.45],
['v31.0', 1.24],
['v35.0', 0.85],
['v38.0', 0.6],
['v32.0', 0.55],
['v37.0', 0.38],
['v33.0', 0.19],
['v34.0', 0.14],
['v30.0', 0.14]
]
}, {
name: 'Firefox',
id: 'Firefox',
data: [
['v35', 2.76],
['v36', 2.32],
['v37', 2.31],
['v34', 1.27],
['v38', 1.02],
['v31', 0.33],
['v33', 0.22],
['v32', 0.15]
]
}, {
name: 'Safari',
id: 'Safari',
data: [
['v8.0', 2.56],
['v7.1', 0.77],
['v5.1', 0.42],
['v5.0', 0.3],
['v6.1', 0.29],
['v7.0', 0.26],
['v6.2', 0.17]
]
}, {
name: 'Opera',
id: 'Opera',
data: [
['v12.x', 0.34],
['v28', 0.24],
['v27', 0.17],
['v29', 0.16]
]
}]
}
});
});
Instead of alert(event.point.name) I want to access the drilldown series data corresponding to the id the user clicks on.
Using the console.log I thought this would work (this.chart.series[0].data[0]) but it displays the series data and not the drilldown.

You are missing drilldown.js which is needed to drilldown the pie.
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
See the Working fiddle here

This is the answer:
this.chart.options.drilldown.series[0].data[0]

How to show the name of which slice is clicked in high chart-piechart

I have a pie chart(high chart) to show the work done by various employees in a department. Everything is working fine. Now I have a requirement to show the name of which slice is clicked when the drill down chart is clicked,so that after downloading the PDF report i can know the source of the drill down.Sample code is as below:
$(function () {
$('#container').highcharts({
chart: {
type: 'pie'
},
title: {
text: 'Employee Activities'
},
subtitle: {
text: 'Click the slices to view drilldown.'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: 'Work Load',
colorByPoint: true,
data: [{
name: 'Mr.A',
y: 56.33,
drilldown: 'Mr.A'
}, {
name: 'Mr.B',
y: 24.03,
drilldown: 'Mr.B'
}, {
name: 'Mr.C',
y: 10.38,
drilldown: 'Mr.C'
}, {
name: 'Ms.D',
y: 4.77,
drilldown: 'Ms.D'
}, {
name: 'Ms.F',
y: 0.91,
drilldown: 'Ms.F'
}, {
name: 'Mr.Z',
y: 0.2,
drilldown: null
}]
}],
drilldown: {
series: [{
name: 'Mr.A',
id: 'Mr.A',
data: [
['W1', 24.13],
['W2', 17.2],
['W3', 8.11],
['W4', 5.33],
['W5', 1.06],
['W6', 0.5]
]
}, {
name: 'Mr.B',
id: 'Mr.B',
data: [
['W1', 5],
['W2', 4.32],
['W3', 3.68],
['W4', 2.96],
['W5', 2.53],
['W6', 1.45]
]
}, {
name: 'Mr.C',
id: 'Mr.C',
data: [
['W1', 2.76],
['W2', 2.32],
['W3', 2.31],
['W4', 1.27]
]
}, {
name: 'Ms.D',
id: 'Ms.D',
data: [
['W1', 2.56],
['W2', 0.77],
['W3', 0.42],
['W4', 0.3],
['W5', 0.29],
['W6', 0.26],
['W7', 0.17]
]
}, {
name: 'Ms.F',
id: 'Ms.F',
data: [
['W7', 0.34],
['W9', 0.24],
['W10', 0.17],
['W11', 0.16]
]
}]
}
});
});
Now If I download the drill down chart, the PDF does not show the name of which slice is downloaded.
Please help me with displaying the name of which drill down is downloaded in the PDF.

You can set the title in chart-> events -> drilldown/drillup events.
events: {
drilldown: function(e) {
this.setTitle({
text: e.seriesOptions.name
});
},
drillup: function(e) {
this.setTitle({
text: 'Employee Activities'
});
}
}
The working fiddle for same can be found here
So your final chart node would be something like below.
chart: {
type: 'pie',
events: {
drilldown: function(e) {
this.setTitle({
text: e.seriesOptions.name
});
},
drillup: function(e) {
this.setTitle({
text: 'Employee Activities'
});
}
},
}

try add code below code
exporting: {
filename: 'custom-file-name'
}
now you set file name according your requirement .

As I understood, you have problems with finding name of the clicked drilldown.
Here's how you can do it JSFiddle (code below). Then you can use that name in download.
This is how your plotOptions should look like:
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y:.1f}%'
},
cursor: 'pointer',
point: {
events: {
click: function () {
//Clicked drilldown name will be alerted here
//You can use it in naming PDF
alert(this.name);
}
}
}
}
},
...here's full code:
$(function () {
$('#container').highcharts({
chart: {
type: 'pie'
},
title: {
text: 'Employee Activities'
},
subtitle: {
text: 'Click the slices to view drilldown.'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y:.1f}%'
},
cursor: 'pointer',
point: {
events: {
click: function () {
//Clicked drilldown name will be alerted here
//You can use it in naming PDF
alert(this.name);
}
}
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: 'Work Load',
colorByPoint: true,
data: [{
name: 'Mr.A',
y: 56.33,
drilldown: 'Mr.A'
}, {
name: 'Mr.B',
y: 24.03,
drilldown: 'Mr.B'
}, {
name: 'Mr.C',
y: 10.38,
drilldown: 'Mr.C'
}, {
name: 'Ms.D',
y: 4.77,
drilldown: 'Ms.D'
}, {
name: 'Ms.F',
y: 0.91,
drilldown: 'Ms.F'
}, {
name: 'Mr.Z',
y: 0.2,
drilldown: null
}]
}],
drilldown: {
series: [{
name: 'Mr.A',
id: 'Mr.A',
data: [
['W1', 24.13],
['W2', 17.2],
['W3', 8.11],
['W4', 5.33],
['W5', 1.06],
['W6', 0.5]
]
}, {
name: 'Mr.B',
id: 'Mr.B',
data: [
['W1', 5],
['W2', 4.32],
['W3', 3.68],
['W4', 2.96],
['W5', 2.53],
['W6', 1.45]
]
}, {
name: 'Mr.C',
id: 'Mr.C',
data: [
['W1', 2.76],
['W2', 2.32],
['W3', 2.31],
['W4', 1.27]
]
}, {
name: 'Ms.D',
id: 'Ms.D',
data: [
['W1', 2.56],
['W2', 0.77],
['W3', 0.42],
['W4', 0.3],
['W5', 0.29],
['W6', 0.26],
['W7', 0.17]
]
}, {
name: 'Ms.F',
id: 'Ms.F',
data: [
['W7', 0.34],
['W9', 0.24],
['W10', 0.17],
['W11', 0.16]
]
}]
}
});
});