Separating Overlapping Value Labels

[intapiuser]

Separate and color code different value label series so they don't collide:

1. In the widget editor, click on the "Options" icon and select "Edit Script"

2. Insert the following script and set the seriesNames and paddingMultiplier parameters to determine which series to apply and how much to move the labels upward

/******* user configuration **********/
var seriesNames = ["Total # Visits +1234", "Total # Visits"];
var paddingMultiplier = -30;
/*************************************/
widget.on('processresult', function(sender, ev){
 for (i = 0; i < seriesNames.length; i++) { 
 var data = _.find(ev.result.series, function (ser) {return ser.name == seriesNames[i]}).data
 _.each(data, function(value){ 
      value.dataLabels = {
 y:paddingMultiplier*(i+1), 
 color:value.color,
 crop:false,
 overflow:'none'}
 })
}
})

3. Click "Save" and refresh the widget to see the result

4. It's possible to do the same with Categories:

/******* user configuration **********/
var paddingMultiplier = -10;
var i=0;
/*************************************/
widget.on('processresult', function(sender, ev){
_.each(ev.result.series, function(ser){
var data = ser.data;
_.each(data, function(value){
value.dataLabels = {
y:paddingMultiplier*(i+1),
color:ser.color,
crop:false,
overflow:'none'}
i++;
})
});
})