Line Chart - X-Axis label customization (granularity, formatting, frequency, first/last values)

When creating a line chart, the X-Axis of the chart may require customization (e.g., number of labels, the format of labels, special handling of first/last values, etc.)

Scenario #1 - Reducing the number of labels (by half)

Add the following script to your widget:

widget.on('processresult', function(widget,result) {
  result.result.xAxis.labels.formatter = function() { 
    var label = this.axis.defaultLabelFormatter.call(this)
    var monthNum = parseInt(label.substr(0,2))

    if (monthNum % 2 == 0) 
      return label 
    else 
      return ''
  }
});

Before	After

Scenario #2 - Formatting relevant labels as quarters and cleaning up the rest

Add the following script to your widget:

widget.on('processresult', function(widget,result) {
  result.result.xAxis.labels.formatter = function() { 
    var label = this.axis.defaultLabelFormatter.call(this)

    if (label.startsWith('01/')) return label.replace('01/','Q1 '); 
    else if (label.startsWith('04/')) return label.replace('04/','Q2 '); 
    else if (label.startsWith('07/')) return label.replace('07/','Q3 '); 
    else if (label.startsWith('10/')) return label.replace('10/','Q4 '); 
    else return ''
  }
});

Before	After

Scenario #3 - Only keeping the first and last label

Add the following script to your widget:

widget.on('processresult', function(widget,result) {
  result.result.xAxis.labels.formatter = function() { 
    var label = this.axis.defaultLabelFormatter.call(this)

    if (this.isFirst || this.isLast) 
      return label;
    else
      return ''
  }
});

Before	After