I would like to create a drill-down highchart.
You can find the jsfiddle link which is not working but the sample data is in it.
data: [{
name: '6',
y: 14
}, {
name: '7',
y: 19
}, ...
}]
},
{
name: 'B1',
data: [{
name: '6',
y: 14
}, {
name: '7',
y: 19
}, ...
},
{
name: 'C1',
data: [{
name: '6',
y: 14
}, {
name: '7',
y: 19
}, ...
}
]
The vice versa is running here:
datanormal = [{
name: '6',
data: [{
name: 'A1',
y: 14,
drilldown: 'Details1'
}, {
name: 'B1',
y: 19,
drilldown: 'Details1'
}, {
name: 'C1',
y: 21,
drilldown: 'Details1'
}]
},
{
name: '7',
data: [{
name: 'A1',
y: 5,
drilldown: 'Details1'
} ...]
}];
datadrill =
[{
id: 'Details1',
name: 'Details1',
data: [
['D1', 4],
['D2', 2],
['D3', 1],
['D4', 4]
]
}];
I need the opposite, from the basic to complex.
This is the main column chart image
This is the detailed drill-down chart image
If you look fot the working example there is another object for the datadrill:
datadrill =
[{
id: 'Details1',
name: 'Details1',
data: [
['D1', 4],
['D2', 2],
['D3', 1],
['D4', 4]
]
}]
You need to do the same on your code.
Could you check this? Is that what you want?
This is jsfiddle link => https://jsfiddle.net/burakkp/ytkqzfos/2/
$(document).ready(function() {
var datadrill;
datadrill = [{
name: 'A1',
data: [{
name: '6',
y: 14
}, {
name: '7',
y: 19
}, {
name: '8',
y: 21
}, {
name: '9',
y: 34
}, {
name: '10',
y: 5
}, {
name: '11',
y: 9
}]
},
{
name: 'B1',
data: [{
name: '6',
y: 14
}, {
name: '7',
y: 19
}, {
name: '8',
y: 21
}, {
name: '9',
y: 34
}, {
name: '10',
y: 5
}, {
name: '11',
y: 9
}]
},
{
name: 'C1',
data: [{
name: '6',
y: 14
}, {
name: '7',
y: 19
}, {
name: '8',
y: 21
}, {
name: '9',
y: 34
}, {
name: '10',
y: 5
}, {
name: '11',
y: 9
}]
}];
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Highcharts multi-series drilldown'
},
subtitle: {
text: 'The <em>allowPointDrilldown</em> option makes point clicks drill to the whole category'
},
xAxis: {
type: 'category'
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: datadrill
});
});
Would you like to achieve something like this? Please test the drilldown only for the first point (A1).
Demo: https://jsfiddle.net/BlackLabel/wn65fkxj/
I did some changes in your data, like:
datadrill = [{
id: 'Details1',
name: 'A1',
data: [{
name: '6',
y: 14
}, {
name: '7',
y: 19
}, {
name: '8',
y: 21
}, {
name: '9',
y: 34
}, {
name: '10',
y: 5
}, {
name: '11',
y: 9
}]
},
{
id: 'Details2',
name: 'B1',
data: [{
name: '6',
y: 14
}, {
name: '7',
y: 19
}, {
name: '8',
y: 21
}, {
name: '9',
y: 34
}, {
name: '10',
y: 5
}, {
name: '11',
y: 9
}]
},
{
id: 'Details3',
name: 'C1',
data: [{
name: '6',
y: 14
}, {
name: '7',
y: 19
}, {
name: '8',
y: 21
}, {
name: '9',
y: 34
}, {
name: '10',
y: 5
}, {
name: '11',
y: 9
}]
}
];
Also, I added null points to trigger different drilldown to each.
API: https://api.highcharts.com/highcharts/drilldown.allowPointDrilldown
Related
I have 2 arrays. I'm using a for loop on arr1 and checking if arr2 contains some of the same shoe sizes as in arr1. If the condition checks that a shoe size from arr1 does not exist in arr2, then it will push an object ({size: '-'}) to the newArr, if it does exist it will just push the shoe object from arr2 into newArr
code:
const newArr = []
const arr1 = [
{ size: 'US 3' },
{ size: 'US 4' },
{ size: 'US 5' },
{ size: 'US 6' },
{ size: 'US 7' },
{ size: 'US 8' },
{ size: 'US 9' },
{ size: 'US 10' },
{ size: 'US 11' },
{ size: 'US 12' },
{ size: 'US 13' },
{ size: 'US 14' },
{ size: 'US 15' },
{ size: 'US 16' }
]
const arr2 = [
{ size: '4', cost: '170' },
{ size: '6', cost: '75' },
{ size: '7', cost: '75' },
{ size: '8', cost: '78' },
{ size: '9', cost: '80' },
{ size: '10', cost: '85' },
{ size: '11', cost: '73' },
{ size: '12', cost: '77' },
{ size: '14', cost: '100' }
]
for (const arr1Item in arr1) {
let arr1Size = arr1[arr1Item].size
let includes = arr1Size.includes(arr2[arr1Item].size);
if(includes) {
newArr.push(arr2[arr1Item])
} else {
newArr.push({size: '-'})
}
}
console.log(newArr)
The problem is whenever I run this I get this error: TypeError: Cannot read properties of undefined (reading 'size')
This error is happening because of this code here:
arr2[arr1Item].size
The thing I'm confused about is if I console.log(arr2[arr1Item]) INSIDE the for loop, it returns each object from arr2 with no error, only gives an error when I add .size.
I've been stuck on this for a bit, would appreciate any help. Thank you.
You iterate over arr1 using the index variable arr1Item, but then use that to index into arr2. As arr1 has more elements than arr2, you end up trying to accessarr2[9] === undefined and undefined does not have a size attribute hence the error TypeError: Cannot read properties of undefined (reading 'size').
Couple of other problems
newArr is not a const.
Array.protoype.includes() is used to see if, say, 4 of arr2.size matches arr.size like US 4 but this will also incorrectly (substring) match US 14.
Potential solution
Using the fact that both arr1 & arr2 are sorted by the (normalized) size attribute, and that the set of (normalized) arr2.size is a subset of (normalized) arr1.size you can do the transformation in linear time (O(arr1.length)):
const arr1 = [
{ size: 'US 3' },
{ size: 'US 4' },
{ size: 'US 5' },
{ size: 'US 6' },
{ size: 'US 7' },
{ size: 'US 8' },
{ size: 'US 9' },
{ size: 'US 10' },
{ size: 'US 11' },
{ size: 'US 12' },
{ size: 'US 13' },
{ size: 'US 14' },
{ size: 'US 15' },
{ size: 'US 16' }
]
const arr2 = [
{ size: '4', cost: '170' },
{ size: '6', cost: '75' },
{ size: '7', cost: '75' },
{ size: '8', cost: '78' },
{ size: '9', cost: '80' },
{ size: '10', cost: '85' },
{ size: '11', cost: '73' },
{ size: '12', cost: '77' },
{ size: '14', cost: '100' }
]
let newArr = []
for(let i1 = 0, i2 = 0; i1 < arr1.length; i1++) {
if(i2 < arr2.length && arr1[i1].size.substr(3) === arr2[i2].size) {
newArr.push(arr2[i2]);
i2++;
} else {
newArr.push({size: '-'});
}
}
console.log(newArr)
I think you want to use filter for matches.
let newArr = []
const arr1 = [
{ size: 'US 3' },
{ size: 'US 4' },
{ size: 'US 5' },
{ size: 'US 6' },
{ size: 'US 7' },
{ size: 'US 8' },
{ size: 'US 9' },
{ size: 'US 10' },
{ size: 'US 11' },
{ size: 'US 12' },
{ size: 'US 13' },
{ size: 'US 14' },
{ size: 'US 15' },
{ size: 'US 16' }
]
const arr2 = [
{ size: 'US 4', cost: '170' },
{ size: '6', cost: '75' },
{ size: '7', cost: '75' },
{ size: '8', cost: '78' },
{ size: '9', cost: '80' },
{ size: '10', cost: '85' },
{ size: '11', cost: '73' },
{ size: '12', cost: '77' },
{ size: '14', cost: '100' }
]
arr1.forEach(a1Item => {
let foundItems = arr2.filter(a2Item => a2Item.size === a1Item.size);
// OR PARTIAL MATCH (arr1.size '4' would match arr2.size 'US 4')
// let foundItems = arr2.filter(a2Item => a2Item.size.includes(a1Item.size));
if (foundItems.length > 0) {
foundItems.forEach(fItem => {
newArr.push(fItem);
});
} else {
// ADDED COST TO KEEP ITEMS CONSISTENT
newArr.push({size: '-', cost: '-'});
}
});
console.log(newArr);
I'm trying to generate a line chart that uses date for the x-axis and two different y-axis. I have it mostly working, but I can't get the tooltip to display the label properly for the second line.
To see this, go to the ECharts Demo Editor and enter the following code:
option = {
xAxis: {
type: 'time'
},
yAxis: [
{
type: 'value'
},
{
type: 'value'
}
],
dataset: {
source: [
{ date: '2020-01-24', orders: 4, sales: 250 },
{ date: '2020-01-25', orders: 3, sales: 250 },
{ date: '2020-01-26', orders: 2, sales: 375 },
{ date: '2020-01-27', orders: 2, sales: 380 },
{ date: '2020-01-28', orders: 4, sales: 325 },
{ date: '2020-01-29', orders: 5, sales: 375 },
{ date: '2020-01-30', orders: 6, sales: 500 },
{ date: '2020-01-31', orders: 4, sales: 425 },
{ date: '2020-02-01', orders: 2, sales: 280 },
{ date: '2020-02-03', orders: 3, sales: 580 },
{ date: '2020-02-04', orders: 4, sales: 250 },
{ date: '2020-02-05', orders: 4, sales: 350 }
]
},
series: [
{
type: 'line',
yAxisIndex: 0,
dimensions: [
{
type: 'time',
name: 'date',
displayName: ''
},
{
type: 'float',
name: 'orders',
displayName: 'Orders'
}
]
},
{
type: 'line',
yAxisIndex: 1,
dimensions:[
{
type: 'time',
name: 'date',
displayName: ''
},
{
type: 'int',
name: 'sales',
displayName: 'Sales'
}
]
}
],
tooltip: {
trigger: 'axis'
}
};
As you can see, the lines render correctly, as do both y axes, but the label for the second series (green line) is empty rather than Sales. However, if I delete the first series from the array, Sales becomes the blue line and the label works correctly in the tooltip, so there seems to be something I'm missing when using multiple series.
I suspect the fix for this is quite simple and obvious, but I've spent a fair amount of time on it and haven't had any luck. Any help would be greatly appreciated.
Give name to series instead of displayName to dimension.
series: [
{
type: 'line',
yAxisIndex: 0,
name:'Orders', // Here
dimensions: [
{
type: 'time',
name: 'date'
},
{
type: 'float',
name: 'orders'
}
]
},
{
type: 'line',
yAxisIndex: 1,
name:'Sales', // Here
dimensions:[
{
type: 'time',
name: 'date'
},
{
type: 'int',
name: 'sales'
}
]
}
]
I have a Sunburst Highcharts in my project. I was wondering if it is possible to change the level without clicking on them.
for example, I have a sunburst like this which has 4 levels.
var data = [{
id: '0.0',
parent: '',
name: 'The World'
}, {
id: '1.3',
parent: '0.0',
name: 'Asia'
}, {
id: '1.1',
parent: '0.0',
name: 'Africa'
}, {
id: '1.2',
parent: '0.0',
name: 'America'
}, {
id: '1.4',
parent: '0.0',
name: 'Europe'
}, {
id: '1.5',
parent: '0.0',
name: 'Oceanic'
},
/* Africa */
{
id: '2.1',
parent: '1.1',
name: 'Eastern Africa'
},
{
id: '3.1',
parent: '2.1',
name: 'Ethiopia',
value: 104957438
}, {
id: '3.2',
parent: '2.1',
name: 'Tanzania',
value: 57310019
}, {
id: '3.3',
parent: '2.1',
name: 'Kenya',
value: 49699862
}, {
id: '3.4',
parent: '2.1',
name: 'Uganda',
value: 42862958
}, {
id: '3.5',
parent: '2.1',
name: 'Mozambique',
value: 29668834
}, {
id: '3.6',
parent: '2.1',
name: 'Madagascar',
value: 25570895
}, {
id: '3.226',
parent: '2.22',
name: 'Samoa',
value: 196440
}, {
id: '3.227',
parent: '2.22',
name: 'Tonga',
value: 108020
}, {
id: '3.228',
parent: '2.22',
name: 'American Samoa',
value: 55641
}, {
id: '3.229',
parent: '2.22',
name: 'Cook Islands',
value: 17380
}, {
id: '3.230',
parent: '2.22',
name: 'Wallis and Futuna',
value: 11773
}, {
id: '3.231',
parent: '2.22',
name: 'Tuvalu',
value: 11192
}, {
id: '3.232',
parent: '2.22',
name: 'Niue',
value: 1618
}, {
id: '3.233',
parent: '2.22',
name: 'Tokelau',
value: 1300
}];
// Splice in transparent for the center circle
Highcharts.getOptions().colors.splice(0, 0, 'transparent');
Highcharts.chart('container', {
chart: {
height: '100%'
},
title: {
text: 'World population 2017'
},
subtitle: {
text: 'Source <href="https://en.wikipedia.org/wiki/List_of_countries_by_population_(United_Nations)">Wikipedia</a>'
},
series: [{
type: "sunburst",
data: data,
allowDrillToNode: true,
cursor: 'pointer',
dataLabels: {
format: '{point.name}',
filter: {
property: 'innerArcLength',
operator: '>',
value: 16
}
},
levels: [{
level: 1,
levelIsConstant: false,
dataLabels: {
filter: {
property: 'outerArcLength',
operator: '>',
value: 64
}
}
}, {
level: 2,
colorByPoint: true
},
{
level: 3,
colorVariation: {
key: 'brightness',
to: -0.5
}
}, {
level: 4,
colorVariation: {
key: 'brightness',
to: 0.5
}
}]
}],
tooltip: {
headerFormat: "",
pointFormat: 'The population of <b>{point.name}</b> is <b>{point.value}</b>'
}
});
Problem is
I want to go to specific levels without clicking on sunburst. for example, I create a button that if the user clicks on it, will do the same action as if I was clicking on Eastern Africa level of my sunburst.
<button onclick="clickOnEasternAfrica()">Do click here</button>
What code should I use for clickOnEasternAfrica() method!?
You can use fireEvent to trigge a click event:
document.getElementById('easternAfrica').addEventListener('click', function(){
var series = chart.series[0];
Highcharts.fireEvent(series, 'click', { point: series.points[6] });
});
Live demo: https://jsfiddle.net/BlackLabel/dLb5hert/
API Reference: https://api.highcharts.com/class-reference/Highcharts#.fireEvent%3CT%3E
I am trying fetch bar value from a highchart drill down bar, but i can only fetch from last bar not the remaining onces.
Example is on this url https://jsfiddle.net/pravisivadasan/j8y21axp/
Can any one help me on this?
$(function () {
var chart;
var protocolNames = ['P1','P2','P3','P4','P5'];
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container_inc',
type: 'column',
events: {
drilldown: function(e) {
parentSeriesIndex = e.point.series.index;
parentSeriesName = e.point.series.name;
chart.setTitle({ text:''});
chart.yAxis[0].setTitle({text:''});
//chart.xAxis[0].setCategories([], true);
chart.yAxis[1].update({
labels: {
enabled: false
},
title: {
text: null
}
});
},
drillup: function(e) {
chart.xAxis[0].setCategories(protocolNames, true);
chart.xAxis[0].update({labels:{rotation:0}});
chart.yAxis[1].update({
labels: {
enabled: true
},
title: {
text: ''
}
});
}
}
},
title: {
text: 'Incident - inflow vs Outflow'
},
credits: {
enabled: false
},
xAxis: [{
title: {
useHTML: true
},
type: "category",
//categories: protocolNames,
labels: {
useHTML: true,
rotation:0
}
}, {
title: {
useHTML: true
},
type: "category",
opposite: true,
//categories: protocolNames,
labels: {
useHTML: true,
rotation:0
}
}],
yAxis: [{
min: 0,
title: {
text: 'Percentage (%)'
}
}, {
title: {
text: ''
},
opposite: true
}],
tooltip: {
//shared: true
},
plotOptions: {
series: {
events:{
click: function (event) {
alert(event.point.name);
console.log(event);
}
}
}
},
series: [{
name: 'Opening Balance',
data: [{
name: 'P1',
y: 2 ,
drilldown: 'P1OBINC_VM'
}, {
name: 'P2',
y: 3,
drilldown: 'P2OBINC_VM'
}, {
name: 'P3',
y: 4,
drilldown: 'P3OBINC_VM'
},
{
name: 'P4',
y: 2,
drilldown: 'P4OBINC_VM'
},
{
name: 'P5',
y: 4,
drilldown: 'P5OBINC_VM'
}],
tooltip: {
valueSuffix: ' %'
}
},
{
name: 'Received',
color: '#000000',
data: [{
name: 'P1',
y: 4,
drilldown: 'P1RecvInc'
}, {
name: 'P2',
y: 5,
drilldown: 'P2RecvInc'
}, {
name: 'P3',
y:2 ,
drilldown: 'P3RecvInc'
},{
name: 'P4',
y:3,
drilldown: 'P4RecvInc'
},{
name: 'P5',
y: 4,
drilldown: 'P5RecvInc'
}],
tooltip: {
valueSuffix: ' %'
},
},{
name: 'Responsed',
color: '#90ED7D',
data: [{
name: 'P1',
y: 2 ,
drilldown: 'P1ResponsedInc'
}, {
name: 'P2',
y: 1,
drilldown: 'P2ResponsedInc'
}, {
name: 'P3',
y: 3,
drilldown: 'P3ResponsedInc'
},{
name: 'P4',
y: 4,
drilldown: 'P4ResponsedInc'
},{
name: 'P5',
y: 5,
drilldown: 'P5ResponsedInc'
}],
tooltip: {
valueSuffix: ' %'
},
},{
name: 'Resolved',
color: '#F7A35C',
data: [{
name: 'P1',
y: 5,
drilldown: 'P1ResolvedInc'
}, {
name: 'P2',
y: 5,
drilldown: 'P2ResolvedInc'
}, {
name: 'P3',
y: 6,
drilldown: 'P3ResolvedInc'
},{
name: 'P4',
y: 6,
drilldown: 'P4ResolvedInc'
},{
name: 'P5',
y: 5,
drilldown: 'P5ResolvedInc'
}],
tooltip: {
valueSuffix: ' %'
},
},{
name: 'Carried Forward',
color: '#0000ff',
data: [{
name: 'P1',
y: 6,
drilldown: 'P1CarriedInc'
}, {
name: 'P2',
y: 2,
drilldown: 'P2CarriedInc'
}, {
name: 'P3',
y: 3,
drilldown: 'P3CarriedInc'
},{
name: 'P4',
y: 4,
drilldown: 'P4CarriedInc'
},{
name: 'P5',
y: 5,
drilldown: 'P5CarriedInc'
}],
tooltip: {
valueSuffix: ' %'
},
},{
name: 'Queued',
color: '#F7A35C',
data: [{
name: 'P1',
y: 12,
drilldown: 'P1QueuedInc'
}, {
name: 'P2',
y:14,
drilldown: 'P2QueuedInc'
}, {
name: 'P3',
y: 15,
drilldown: 'P3QueuedInc'
},{
name: 'P4',
y: 21,
drilldown: 'P4QueuedInc'
},{
name: 'P5',
y: 46,
drilldown: 'P5QueuedInc'
}],
tooltip: {
valueSuffix: ' %'
},
},{
name: 'SLA Hold',
color: '#ffff00',
data: [{
name: 'P1',
y: 3,
drilldown: 'P1SLAInc'
}, {
name: 'P2',
y: 4,
drilldown: 'P2SLAInc'
}, {
name: 'P3',
y: 4,
drilldown: 'P3SLAInc'
},{
name: 'P4',
y: 5,
drilldown: 'P4SLAInc'
},{
name: 'P5',
y: 6,
drilldown: 'P5SLAInc'
}],
tooltip: {
valueSuffix: ' %'
}
}
],
drilldown: {
series: [{
name: 'OB',
id: 'P1OBINC_VM',
dataLabels: {
enabled: true
},
data: [
['OB P1 ',12]
],
Type: 'INC'
},
{
name: 'OB',
id: 'P2OBINC_VM',
dataLabels: {
enabled: true
},
data: [
['OB P2 ',4]
],
Type: 'INC'
},
{
name: 'OB',
id: 'P3OBINC_VM',
dataLabels: {
enabled: true
},
data: [
['OB P3 ',5],
],
Type: 'INC'
},
{
name: 'OB',
id: 'P4OBINC_VM',
dataLabels: {
enabled: true
},
data: [
['OB P4 ',6]
],
Type: 'INC'
},
{
name: 'OB',
id: 'P5OBINC_VM',
dataLabels: {
enabled: true
},
data: [
['OB P5 ',5]
],
Type: 'INC'
},{
name: 'Received',
id: 'P1RecvInc',
dataLabels: {
enabled: true
},
data: [
['Received P1 ',2]
],
Type: 'INC'
},{
name: 'Received',
id: 'P2RecvInc',
dataLabels: {
enabled: true
},
data: [
['Received P2 ',3]
],
Type: 'INC'
},{
name: 'Received',
id: 'P3RecvInc',
dataLabels: {
enabled: true
},
data: [
['Received P3 ',3]
],
Type: 'INC'
},{
name: 'Received',
id: 'P4RecvInc',
dataLabels: {
enabled: true
},
data: [
['Received P4 ',2]
],
Type: 'INC'
},{
name: 'Received',
id: 'P5RecvInc',
dataLabels: {
enabled: true
},
data: [
['Received P5 ',5]
],
Type: 'INC'
}, {
name: 'Responsed',
id: 'P1ResponsedInc',
dataLabels: {
enabled: true
},
data: [
['Responsed P1 ',6]
],
Type: 'INC'
},{
name: 'Responsed',
id: 'P2ResponsedInc',
dataLabels: {
enabled: true
},
data: [
['Responsed P2 ',7]
],
Type: 'INC'
},{
name: 'Responsed',
id: 'P3ResponsedInc',
dataLabels: {
enabled: true
},
data: [
['Responsed P3 ',3]
],
Type: 'INC'
},{
name: 'Responsed',
id: 'P4ResponsedInc',
dataLabels: {
enabled: true
},
data: [
['Responsed P4 ',6]
],
Type: 'INC'
},{
name: 'Responsed',
id: 'P5ResponsedInc',
dataLabels: {
enabled: true
},
data: [
['Responsed P5 ',7]
],
Type: 'INC'
},
{
name: 'Resolved',
id: 'P1ResolvedInc',
dataLabels: {
enabled: true
},
data: [
['Resolved P1 ',6]
],
Type: 'INC'
},
{
name: 'Resolved',
id: 'P2ResolvedInc',
dataLabels: {
enabled: true
},
data: [
['Resolved P2 ',7]
],
Type: 'INC'
},
{
name: 'Resolved',
id: 'P3ResolvedInc',
dataLabels: {
enabled: true
},
data: [
['Resolved P3 ',6]
],
Type: 'INC'
},
{
name: 'Resolved',
id: 'P4ResolvedInc',
dataLabels: {
enabled: true
},
data: [
['Resolved P4 ',4]
],
Type: 'INC'
},
{
name: 'Resolved',
id: 'P5ResolvedInc',
dataLabels: {
enabled: true
},
data: [
['Resolved P5 ',5]
],
Type: 'INC'
},
{
name: 'Carried Forward',
id: 'P1CarriedInc',
dataLabels: {
enabled: true
},
data: [
['Carried P1 ',7]
],
Type: 'INC'
},{
name: 'Carried Forward',
id: 'P2CarriedInc',
dataLabels: {
enabled: true
},
data: [
['Carried P2 ',8]
],
Type: 'INC'
},{
name: 'Carried Forward',
id: 'P3CarriedInc',
dataLabels: {
enabled: true
},
data: [
['Carried P3 ',8]
],
Type: 'INC'
},{
name: 'Carried Forward',
id: 'P4CarriedInc',
dataLabels: {
enabled: true
},
data: [
['Carried P4 ',4]
]
},{
name: 'Carried Forward',
id: 'P5CarriedInc',
dataLabels: {
enabled: true
},
data: [
['Carried P5 ',6]
]
}, {
name: 'Queued',
id: 'P1QueuedInc',
dataLabels: {
enabled: true
},
data: [
['Queued P1 ',2]
]
},{
name: 'Queued',
id: 'P2QueuedInc',
dataLabels: {
enabled: true
},
data: [
['Queued P2 ',3]
]
},{
name: 'Queued',
id: 'P3QueuedInc',
dataLabels: {
enabled: true
},
data: [
['Queued P3 ',4]
]
},{
name: 'Queued',
id: 'P4QueuedInc',
dataLabels: {
enabled: true
},
data: [
['Queued P4 ',5]
]
},{
name: 'Queued',
id: 'P5QueuedInc',
dataLabels: {
enabled: true
},
data: [
['Queued P5 ',6]
]
},{
name: 'SLA Hold',
id: 'P1SLAInc',
dataLabels: {
enabled: true
},
data: [
['SLA Hold P1 ',7]
]
},{
name: 'SLA Hold',
id: 'P2SLAInc',
dataLabels: {
enabled: true
},
data: [
['SLA Hold P2 ',5]
]
},{
name: 'SLA Hold',
id: 'P3SLAInc',
dataLabels: {
enabled: true
},
data: [
['SLA Hold P3 ',4]
]
},{
name: 'SLA Hold',
id: 'P4SLAInc',
dataLabels: {
enabled: true
},
data: [
['SLA Hold P4 ',3]
]
},{
name: 'SLA Hold',
id: 'P5SLAInc',
dataLabels: {
enabled: true
},
data: [
['SLA Hold P5 ',7]
]
}]
}
});
});
});
I'm using Highcharts Stacked column and I need to remove drilldown link when some item is empty.
Preconditions:
Use value 0 or null when some item is empty because it's necessary to sort the chart columns.
Some columns may have drilldown and others not, depends on the data.
Please refer to the jsfiddle example:
http://jsfiddle.net/tsenffor/
How to reproduce:
Below the chart, uncheck the the "CCC" label.
Note that "Name 4 column" has no value, but the drilldown link is enabled. See the image below.
If possible hide the empty column, but I still need this value set 0 or null in the code because the columns sorting.
Find the related columns sorting issue here.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
type: 'category'
},
yAxis: {
min: 0,
title: {
text: 'Highchart test'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold'
}
}
},
legend: {
enabled: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'AAA',
data: [{
name: 'Name 1',
y: 5,
drilldown: 'Name1AAA'
}, {
name: 'Name 4',
y: 0
}, {
name: 'Name 3',
y: 2
}, {
name: 'Name 2',
y: 2
}]
}, {
name: 'BBB',
data: [{
name: 'Name 1',
y: 10,
drilldown: 'Name1BBB'
}, {
name: 'Name 4',
y: 0
}, {
name: 'Name 3',
y: 0
}, {
name: 'Name 2',
y: 5
}]
}, {
name: 'CCC',
data: [{
name: 'Name 1',
y: 4,
drilldown: 'Name1CCC'
}, {
name: 'Name 4',
y: 12,
drilldown: 'Name4CCC'
}, {
name: 'Name 3',
y: 8
}, {
name: 'Name 2',
y: 1
}]
}],
drilldown: {
series: [{
name: 'Name 1 - AAA',
id: 'Name1AAA',
data: [
['Name 1/1', 2],
['Name 1/2', 2],
['Name 1/3', 1],
]
}, {
name: 'Name 1 - BBB',
id: 'Name1BBB',
data: [
['Name 1/1', 7],
['Name 1/2', 2],
['Name 1/3', 1],
]
}, {
name: 'Name 1 - CCC',
id: 'Name1CCC',
data: [
['Name 1/1', 2],
['Name 1/2', 3],
['Name 1/3', 4],
]
}, {
name: 'Name 4 - CCC',
id: 'Name4CCC',
data: [
['Name 4/1', 4],
['Name 4/2', 5],
['Name 4/3', 3],
]
}]
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="http://github.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Is there a way to do this?
Thanks!
We can use drilldown option to control the drilldown.
drilldown: {
//for axis label
activeAxisLabelStyle: {
textDecoration: 'none',
fontStyle: 'italic'
},
//for datalabel
activeDataLabelStyle: {
textDecoration: 'none',
fontStyle: 'italic'
}
}
Reference:http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/drilldown/labels/
To remove links of x-axis labels use this:
Highcharts.Tick.prototype.drillable = function () {};
Look this:
http://jsfiddle.net/tsenffor/3/