abdariyanto
Posts: 4
Joined: Tue Sep 21, 2021 8:58 am

use update for max in scrollbar and data labels is dissapear

Hallo can you help me for the drillup button i use update max for the scroll bar and data labels is dissappear

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/
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: use update for max in scrollbar and data labels is dissapear

Hello abdariyanto,

Thanks for contacting us with your question.

I need some clarification here, because I'm not quite sure I understood correctly. The issue is that the data labels disappear when you return to previous drilldown level? The shared demo suggests it, but the description is not clear and I would be grateful for any additional information.

At the same time, I've seen your previous topic and it seems like it is a duplicate. Please avoid making duplicates as it greatly disrupts answering questions on the forum. We're doing our best to answer all questions ASAP.

Best regards!
Mateusz Bernacik
Highcharts Developer
abdariyanto
Posts: 4
Joined: Tue Sep 21, 2021 8:58 am

Re: use update for max in scrollbar and data labels is dissapear

hi mateusz.b thankyou for your answer, I'm sorry to post the question 2 times because the first question I accidentally to lock the answer i dont know to unlock ,
i have got the answer, i removed the max update function on drillup events and it worked for me and this example for my way to use

Code: Select all

false
https://jsfiddle.net/BlackLabel/4ejuh9bo/ or clear the

Code: Select all

 setExtremes 
https://jsfiddle.net/BlackLabel/7wueps4d/
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: use update for max in scrollbar and data labels is dissapear

abdariyanto,

That's great to hear you managed to solve the issue. Indeed setting wrong extremes was the cause.

In case of any further questions, feel free to contact us again.
Best regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Stock”