Format Axis Labels In Charts

Introduction

In this post we will explain how to format the axis labels in charts, remove truncation, add new line etc.

Purpose/Benefits

Present long labels, break text to multiple line.

Example

Create chart widget

EDIT WIDGET SCRIPT

The following script will increase number of character which after the label will be truncated

widget.on('beforeviewloaded', function(widget, ev){
    var newMaxCharactersPerLabel = 25;
    ev.options.xAxis.labels.maxCharactersPerLabel = newMaxCharactersPerLabel;
})

The following script will break labels with space into multiple lines (new line for each space):

widget.on('beforeviewloaded', function(widget, ev){
    var newmaxCharactersPerLabel = 25;
    ev.options.xAxis.labels.maxCharactersPerLabel = newmaxCharactersPerLabel;
    ev.options.xAxis.labels.useHTML = true;
    ev.options.xAxis.labels.formatter = function(){
        return this.value.replace(' ','<br/>')
    }
})