cancel
Showing results for 
Search instead for 
Did you mean: 
intapiuser
Community Team Member
Community Team Member
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} 
})

})
Rate this article:
Comments
taras
Sisense Team Member
Sisense Team Member

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

Version history
Last update:
‎03-02-2023 09:14 AM
Updated by:
Contributors