cancel
Showing results for 
Search instead for 
Did you mean: 
intapiuser
Community Team Member
Community Team Member
Introduction
When you use bar charts, sometimes the X labels could be quite long and therefore take up a lot of space of the widget that could have been better used for the actual bars. To better display the labels without sacrificing the space for the bars, we can push those labels so that they display on top of the bars. After that, we need to change the color of the labels so that they are still readable on top of colored bars (white works with a lot of colors). In case the labels are longer than the bars, we need to add shadows on the labels so that they are still readable on a white background.
Instructions
Create a bar chart widget, add and modify the following script according to your needs.
//This is the script to use to push the X axis labels on to the bars and modify the text formatting

widget.on('render', function(se,ev){

 //Change the X axis labels alignment
 se.queryResult.xAxis.labels.align = 'left';

 //Change the X axis labels distance from the axis 
 se.queryResult.xAxis.labels.x = 10;

 //Change the X axis labels distance from the Y axis to better align the position of the labels with the ticks
 se.queryResult.xAxis.labels.y = 6;

 //Change the X axis labels color 
 se.queryResult.xAxis.labels.style.color = '#ffffff';

 //Change the X axis labels font size 
 se.queryResult.xAxis.labels.style.fontSize = 13;

 //Change the X axis labels font weight
 se.queryResult.xAxis.labels.style.fontWeight = 'bold';

 //Change the X axis labels font typeface
 se.queryResult.xAxis.labels.style.fontFamily = 'Arial';

}) 

//This is the script used to customize the color of the third label and to add shadows to the texts for when the labels are longer than the bars 

widget.on('ready', function(se,ev){
 
 //Change the third X axis label font color to make it more legible (white on yellow is not good)
 $('.highcharts-xaxis-labels text:nth-child(3)', element).css({'fill' : '#7E621D'});

 //Add text shadow to the X axis labels for when the labels are longer than the bars
 $('.highcharts-xaxis-labels text:nth-child(1)', element).css({'text-shadow' : '-1px -1px 0 #E8554E, 1px -1px 0 #E8554E, -1px 1px 0 #E8554E, 1px 1px 0 #E8554E'});
 $('.highcharts-xaxis-labels text:nth-child(2)', element).css({'text-shadow' : '-1px -1px 0 #F19C65, 1px -1px 0 #F19C65, -1px 1px 0 #F19C65, 1px 1px 0 #F19C65'});
 $('.highcharts-xaxis-labels text:nth-child(3)', element).css({'text-shadow' : '-1px -1px 0 #FFD265, 1px -1px 0 #FFD265, -1px 1px 0 #FFD265, 1px 1px 0 #FFD265'});
 $('.highcharts-xaxis-labels text:nth-child(4)', element).css({'text-shadow' : '-1px -1px 0 #2AA876, 1px -1px 0 #2AA876, -1px 1px 0 #2AA876, 1px 1px 0 #2AA876'});
 $('.highcharts-xaxis-labels text:nth-child(5)', element).css({'text-shadow' : '-1px -1px 0 #0A7B83, 1px -1px 0 #0A7B83, -1px 1px 0 #0A7B83, 1px 1px 0 #0A7B83'});

})
Rate this article:
Version history
Last update:
‎03-02-2023 09:17 AM
Updated by:
Contributors