Forum Discussion

cartercjb's avatar
cartercjb
ETL
01-11-2022
Solved

DYNAMICALLY FORMATTED DATA LABELS

Does anyone have suggestions on how to do the following:  Script the data labels so that they never overlap? I'm not sure if that's possible but I can hope! Add additional formatting aroun...
Blox
Code-first Analytics
dashboards & reporting
  • harikm007's avatar
    harikm007
    01-15-2022

    cartercjb 

    I believe there is insufficient space on the right side of the chart, which is why the data label is visible inside the bar. One way to fix this is to dynamically increase the Max value. The script has been updated.  Please change value of the variable 'increasePercent' as required.

    //Formatting datalabels 
widget.on('processresult', function(se,ev){
	var maxValue = 0
	var increasePercent = 0.2 //variable to adjust right space. Change this value as needed
		
	$.each(ev.result.series, function(seriesIndex, value){
		
		$.each(value.data, function(di, dataItem){
			if(dataItem.y > maxValue)
				maxValue = dataItem.y
		})
		
		value.dataLabels = {
									backgroundColor: '#f5d142', //data label color
									color: 'white',
									padding: 5,
									borderRadius: 5
								}
	
	})
	
	ev.result.yAxis[0].max = maxValue + (increasePercent * maxValue) ;
		
})

//Adjusting position of datalabels
widget.on('domready', function(se,ev){
	
	barWidth = $('.highcharts-series-group .highcharts-series rect', element).width()
	
	$('.highcharts-data-labels .highcharts-label', element).each(function(){
		labelWidth = $(this).find('rect').width()
		labelHeight = $(this).find('rect').height()
		
		$(this).find('rect').attr('x', ($(this).find('rect').attr('x') + 2))
		$(this).find('rect').attr('height', barWidth)
		$(this).find('rect').attr('y', ((labelHeight - barWidth)/2))
	
	})

});

     Thanks

    -Hari

cartercjb's avatar
cartercjb
ETL
01-14-2022

harikm007 Hari - 

Thanks for your feedback! That definitely helped - but there is still a bit of overlap that you will notice on the largest blue bar. Is there any additional scripting that can be done or is that as good as it will get? Thanks!

-Carter

 

 

harikm007's avatar
harikm007
Data Warehouse
01-15-2022

cartercjb 

I believe there is insufficient space on the right side of the chart, which is why the data label is visible inside the bar. One way to fix this is to dynamically increase the Max value. The script has been updated.  Please change value of the variable 'increasePercent' as required.

//Formatting datalabels 
widget.on('processresult', function(se,ev){
	var maxValue = 0
	var increasePercent = 0.2 //variable to adjust right space. Change this value as needed
		
	$.each(ev.result.series, function(seriesIndex, value){
		
		$.each(value.data, function(di, dataItem){
			if(dataItem.y > maxValue)
				maxValue = dataItem.y
		})
		
		value.dataLabels = {
									backgroundColor: '#f5d142', //data label color
									color: 'white',
									padding: 5,
									borderRadius: 5
								}
	
	})
	
	ev.result.yAxis[0].max = maxValue + (increasePercent * maxValue) ;
		
})

//Adjusting position of datalabels
widget.on('domready', function(se,ev){
	
	barWidth = $('.highcharts-series-group .highcharts-series rect', element).width()
	
	$('.highcharts-data-labels .highcharts-label', element).each(function(){
		labelWidth = $(this).find('rect').width()
		labelHeight = $(this).find('rect').height()
		
		$(this).find('rect').attr('x', ($(this).find('rect').attr('x') + 2))
		$(this).find('rect').attr('height', barWidth)
		$(this).find('rect').attr('y', ((labelHeight - barWidth)/2))
	
	})

});

 Thanks

-Hari

  • cartercjb's avatar
    cartercjb
    ETL
    01-15-2022

    BOOM! That worked! Thank you so much! harikm007 

     

    • cartercjb's avatar
      cartercjb
      ETL
      01-18-2022

      harikm007  what would the equivalent of this be for column chart?

      • harikm007's avatar
        harikm007
        Data Warehouse
        01-18-2022

        cartercjb This is the script for column chart : 

        //Formatting datalabels 
widget.on('processresult', function(se,ev){
	var maxValue = 0
	var increasePercent = 0.2//variable to adjust right space. Change this value as needed
		
	$.each(ev.result.series, function(seriesIndex, value){
		
		$.each(value.data, function(di, dataItem){
			if(dataItem.y > maxValue)
				maxValue = dataItem.y
		})
		
		value.dataLabels = {
									backgroundColor: '#f5d142', //data label color
									color: 'black',
									padding: 5,
									borderRadius: 5
								}
	
	})
	
	ev.result.yAxis[0].max = maxValue + (increasePercent * maxValue) ;
		
})

//Adjusting position of datalabels
widget.on('domready', function(se,ev){
	
	barWidth = $('.highcharts-series-group .highcharts-series rect', element).width()
	
	$('.highcharts-data-labels .highcharts-label', element).each(function(){
		labelWidth = $(this).find('rect').width()
		labelHeight = $(this).find('rect').height()
		$(this).find('rect').attr('width', barWidth)
		$(this).find('rect').attr('height', labelHeight - 5)
		$(this).find('rect').attr('x', ((labelWidth - barWidth)/2))
	
	})

});

        Thanks

        -Hari

  • cartercjb's avatar
    cartercjb
    ETL
    03-14-2022

    Hari harikm007 - 

    How would you add to this script so that the x-axis labels align left? I've tried a few different things but neither work. 

    • harikm007's avatar
      harikm007
      Data Warehouse
      03-15-2022

      Hi cartercjb ,

      Are you looking for something like this?

      If yes, try this script:

      widget.on('processresult', function(se, ev){
	ev.result.xAxis.labels.align = 'left'
	ev.result.xAxis.labels.reserveSpace = true
})

      -Hari