Forum Discussion

cartercjb's avatar
01-11-2022
Solved

DYNAMICALLY FORMATTED DATA LABELS

Does anyone have suggestions on how to do the following: 

  1. Script the data labels so that they never overlap? I'm not sure if that's possible but I can hope!
  2. Add additional formatting around the data labels similar to the screenshot below where each data label is surrounded in a colored shape?

  • 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

12 Replies

Replies have been turned off for this discussion
  • harikm007's avatar
    harikm007
    Data Warehouse

    Hi cartercjb ,

    1. I found this article to separate overlapping data labels : 

    https://support.sisense.com/kb/en/article/separating-overlapping-value-labels

    2. Please try this widget script for column chart:

    //Formatting datalabels 
    widget.on('processresult', function(se,ev){
    	
    	$.each(ev.result.series, function(index, value){
    		value.dataLabels = {
    									backgroundColor: value.color,
    									color: 'white',
    									padding: 5,
    									borderRadius: 5
    								}
    	
    	})
    	
    })
    
    //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))
    	
    	})
    
    });

    This is how the column chart will looks like after applying the above script : 

    Thanks

    -Hari

    • cartercjb's avatar
      cartercjb
      ETL

      harikm007 Hari,

      First off, THANK  YOU!! You are extremely helpful. Two follow-up questions. Please reference the screenshot below. 

      1. Is there anything that can be done to make the spacing more dynamic? See the green bars on the REHAB DAYS widget? There is no space in between the bars and the label.
      2. Is there a way to make all data labels 1 single color?

       

       

      • harikm007's avatar
        harikm007
        Data Warehouse

        cartercjb 

        Previous script is only for column chart. Please try below script for bar chart. Also script is updated to make all data labels same color

        //Formatting datalabels 
        widget.on('processresult', function(se,ev){
        	
        	$.each(ev.result.series, function(index, value){
        		value.dataLabels = {
        									backgroundColor: '#f5d142', //data label color
        									color: 'white',
        									padding: 5,
        									borderRadius: 5
        								}
        	
        	})
        	
        })
        
        //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