Text Wrapping For Long X-Axis Labels & Legend Sorting In Stacked Charts

[intapiuser]

Introduction

When our chart x-axis have long labels, by default the SISense Web application will not render the entire label. For this, we can use the following script which wraps the text and breaks the text line for every other white space. In addition, the legend will sort revers in horizontal stacked bar charts, for this, the second part of the script will reverse the original sorting of the legend values, so as to adequately show the legend according to the stacked values.

One note, in order to sort the legend, you'll need to replace the seriesName variable with the name of the dimension which you're breaking by, currently it's set as 'Percent'

Before:

After:

Script:

Place the following script in the widget's script box

//the following element wraps the label text
widget.on('beforeviewloaded', function (widget, ev) {
 var newMaxCharactersPerLabel = 100;
 ev.options.xAxis.labels.maxCharactersPerLabel = newMaxCharactersPerLabel;
 ev.options.xAxis.labels.useHTML = true;

 ev.options.xAxis.labels.formatter = function () {
  var text = this.value;
  var newText = "";
  var array = text.split(" ");
  for (i = 0; i < array.length; i++) {
   if (i % 2 == 1 && array.length > 1) {
    newText += array[i - 1] + ' ' + array[i] + '';
   }
   else if(array.length == 1){
    newText = array[i];
   }
  }
  return newText;
 }
});
//the following element sorts the legend accordingly, make sure to replace the 
//seriesName variable with the name of the dimension which you're breaking by, currently it's set as 'Percent'
widget.on('processresult',function(se,ev){
var seriesName = 'Percent';
ev.result.series.sort(function(b,a){return a.name.localeCompare(b.name); });

  var series = ev.result.series;
 var numberOfSeries = ev.result.series.length;
 for(var i=0;i < numberOfSeries;i++){
  series[i].legendIndex = numberOfSeries - i;
 }
 var data = _.find(ev.result.series, function (ser) {return ser.name == seriesName}).data 
_.each(data, function(value){ 
//enable dataLabels, change its font, make it bold and rotate by 270 
value.dataLabels = {enabled:true, style:{'fontSize':'50px', 'fontWeight':'bold'}, rotation: 0} 
})

})

[taras]

To display the legend in reverse order the following script can be applied:

widget.on("processresult",(se,ev)=>{ev.result.legend.reversed=true});

More details about the parameter can be found here: https://api.highcharts.com/highcharts/legend.reversed