CODEWITHSUNDEEP
highcharts
zostale
zostale

Reputation: 37

Force last label and tick on x-axis

I have a spline graph with date categories on the x-axis. The labels are in steps of 2 so it shows alternate dates. How can I show the last label and tick regardless of the step size ? Example : if the last two labels are 11/6 and 12/6 I want to show 12/6 even if the step size is 2. If the last category is 13/6 then it works fine.

Upvotes: 1

Views: 1086

Answers (2)

jlbriggs
jlbriggs

Reputation: 17791

You can achieve this with the tickPositioner() function.

This example uses a simple numeric axis, but should work the same with categories. If you're using an actual datetime axis, then the check within the callback function will need to be edited to match your date intervals.

Code example:

xAxis: {
  tickPositioner: function() {
    var positions = [],
      ext = this.getExtremes(),
      xMax = Math.round(ext.max),
      xMin = Math.round(ext.min);

    for (var i = xMin; i < xMax; i++) {
      if (i % 2 == 0) {
        positions.push(i);
      }
    }
    positions.push(xMax);
    return positions;
  }
}

Fiddle:

Updated fiddle using Monthly categories:

Reference:

Upvotes: 1

Barbara Laird
Barbara Laird

Reputation: 12717

I don't see a way to have tickInterval of 2 and add an additional tick at the end. But, if you use a tickInterval of 1, you can display every other label plus the final label using the formatter.

Highcharts.chart('container', {
    xAxis: {
        labels: {
            formatter: function () {
                var label = this.axis.defaultLabelFormatter.call(this);
                if (label % 2 == 1 && !this.isLast) label = '';
                return label;
            }
        },
        tickInterval: 1
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        type: 'line'
    }]

});

http://jsfiddle.net/p665hgo0/

Upvotes: 1

Related Questions