Code: Select all
Highcharts.setOptions({
lang: {
drillUpText: '< Back'
}
});
Highcharts.chart('chart_div_ams', {
chart: {
type: 'column',
spacingBottom: 25,
events: {
drillup : function(e) {
var lvl = e.seriesOptions.data[0].drillup;
var chart = this;
if(e.seriesOptions.data.length == 0){
e.target.xAxis[0].update({ max: 0});
console.log('data kosong')
}
else if(e.seriesOptions.data.length == 1){
e.target.xAxis[0].update({ max: 0.1});
console.log('data kosong')
}
else if(e.seriesOptions.data.length == 2){
e.target.xAxis[0].update({ max: 1});
}
else if(e.seriesOptions.data.length == 3){
e.target.xAxis[0].update({ max: 2});
}
else if(e.seriesOptions.data.length >=4 ){
e.target.xAxis[0].update({ max: 3});
}
console.log(this.xAxis[0].max )
chart.reflow();
},
drilldown: function (e) {
var id = e.point.drilldown;
if (!e.points || e.points[0] == e.point) {
var chart = this;
// Show the loading label
chart.showLoading('Loading ...');
var lvl = e.point.next;
var id = e.point.drilldown;
if (lvl != 'user'){
chart.options.chart.level + 1
var tes = getBarChartDrilldown(e.point.next,e.point.drilldown);
var data_total = '';
setTimeout(function () {
$.each(tes,function(i,val){
data_total = val.data.length;
chart.addSingleSeriesAsDrilldown(e.point, val);
});
chart.applyDrilldown();
if(data_total == 0){
chart.xAxis[0].update({max: 0});
}
if(data_total == 1){
chart.xAxis[0].update({max: 0});
}
if(data_total == 2){
chart.xAxis[0].update({max: 1});
}
if(data_total == 3){
chart.xAxis[0].update({max: 2});
}
if(data_total >= 4){
chart.xAxis[0].update({max: 3});
}
chart.hideLoading();
}, 1000);
}else{
showDetailUser(e.point.drilldown,e.point.name);
chart.hideLoading();
}
}
},
}
},
title: {
visible:false,
text: null
},
credits:{
enabled: false
},
legend:{
enabled: true,
alignColumns: false
},
xAxis: {
type: "category",
labels: {
style: {
color: 'black'
},
overflow: 'justify',
},
min:0,
max: 0,
scrollbar: {
enabled: true,
showFull: false,
barBackgroundColor: '#222255',
barBorderRadius: 7,
barBorderWidth: 0,
buttonBackgroundColor: '#222255',
buttonBorderWidth: 0,
buttonArrowColor: 'white',
buttonBorderRadius: 7,
rifleColor: 'white',
trackBackgroundColor: 'white',
trackBorderWidth: 1,
trackBorderColor: 'silver',
trackBorderRadius: 7
},
},
yAxis: {
min: 0,
title: {
text: 'Percentage'
},
max: 100
},
tooltip: {
formatter: function() {return ' ' +
this.point.name +':' +'<b>' + this.point.y+' %</b>' + '<br>' +
'Total :' +'<b>' + this.point.total+'</b>' ;
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
minPointLength:0,
dataLabels: {
y : 100,
enabled: true,
align : 'center',
format: '{point.y:.2f}'+'%',
// format: {
// formatter: function() {return ' ' +
// this.point.name +':' +'<b>' + this.point.y+'</b>' + '<br>' +
// 'Total :' +'<b>' + this.point.total+'</b>' ;
// }
// },
style: {color: "#ffffff", textDecoration: "none"},
crosshair: true
},
// maxPointWidth: 20,
// borderRadius: 5,
groupPadding: 0.01,
},
series: {
borderWidth: 0,
dataLabels: {
y : 100,
enabled: true,
align : 'center',
format: '{point.y:.2f}'+'%',
style: {color: "#ffffff", textDecoration: "none"},
},
style: {
color: 'white'
},
crosshair: true,
},
},
series:value_chart,
drilldown: {
activeAxisLabelStyle: {
textDecoration: 'none',
color : 'black',
fontWeight: 'regular'
},
activeDataLabelStyle: {
textDecoration: 'none',
color : 'white',
fontWeight: 'regular'
},
drillUpButton: {
relativeTo: 'spacingBox',
position: {
y: 0,
x: -10
},
theme: {
fill: '#272362',
'stroke-width': 1,
stroke: 'silver',
r: 0,
states: {
hover: {
fill: '#272362'
},
select: {
stroke: '#039',
fill: '#272362'
}
},
style: {
color: 'white'
},
},
},
},
drillup : {
activeAxisLabelStyle: {
textDecoration: 'none',
color : 'black',
fontWeight: 'regular'
},
activeDataLabelStyle: {
textDecoration: 'none',
color : 'white',
fontWeight: 'regular'
},
}
});
and if the drillup is click and the data labels is disappear but if click drilldown its work any one to help me fix the issue thankyou and this a js field for clear my question https://jsfiddle.net/ariyan1919/o6hzbfgm/5/