Bar Chart: Push X Labels Onto The Bars & Add Shadows To Texts
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'});
})Updated 03-02-2023
