customizing sequence of x-axis labels in highcharts

Question

For a certain analysis, i wish to have all the positive values first (in increasing order) on x-axis and then the negative range, also in increasing order.

For eg. here i'd want 0, 10, 20 before (-90 to -10)

I've tried separating the negative and positive values and merging them in the desired sequence and then using categories.

var data = [[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1],
            [50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]];
            
var neg = [], pos = [];

for(let i = 0; i < data.length; i++) {
    if(data[i][1] < 0)
    neg.push(data[i]);
  else 
    pos.push(data[i]);
}

neg.sort(function(x, y) {
    if(x[1] < y[1])
    return -1;
  if(x[1] > y[1])
    return 1;
   
  return 0;
});

pos.sort(function(x, y) {
    if(x[1] < y[1])
    return -1;
  if(x[1] > y[1])
    return 1;
   
  return 0;
});

var cat = [], x_axis = [];

for(let i = 0; i < pos.length; i++) {
    cat.push(pos[i][1]);
  x_axis.push(pos[i][0]);
}
for(let i = 0; i < neg.length; i++) {
    cat.push(neg[i][1]);
  x_axis.push(neg[i][0]);
}


console.log(cat);
console.log(x_axis);


Highcharts.chart('container', {
    chart: {
        type: 'spline'
    },
    xAxis: {
        reversed: false,
        title: {
            enabled: true,
            text: 'Altitude'
        },
        labels: {
            format: '{value} km'
        },
        categories: cat
    },
    yAxis: {
        title: {
            text: 'Temperature'
        },
        labels: {
            format: '{value}°'
        },
        lineWidth: 2
    },
    tooltip: {
        headerFormat: '<b>{series.name}</b><br/>',
        pointFormat: '{point.x} km: {point.y}°C'
    },
    plotOptions: {
        spline: {
            marker: {
                enable: false
            }
        }
    },
    series: [{
        name: 'Temperature',
        data: x_axis

    }]
});

This is what i achieved Instead of the exact floating point numbers in the x-axis, i wish to have fixed interval values (ex 0, 10, 20 ... -90, -80, -70 ...) Thanks in advance

Answer 1

You can convert all positive values to negative and negative to positive, sort the array and display reversed values in a tooltip and x-axis labels.

For example:

const data = [
  [0, 15],
  [10, -50],
  [20, -56.5],
  [30, -46.5],
  [40, -22.1],
  [50, -2.5],
  [60, -27.7],
  [70, -55.7],
  [80, -76.5]
];

const reverseNumber = (value) => {
  if (value > 0) {
    return -Math.abs(value);
  }
  return Math.abs(value);
};

const processedData = data.map(dataEl => [
  reverseNumber(dataEl[1]),
  dataEl[0]
]);

processedData.sort((a, b) => a[0] - b[0]);

Highcharts.chart('container', {
  ...,
  xAxis: {
    ...,
    labels: {
      formatter: function() {
        return reverseNumber(this.value) + ' km';
      }
    }
  },
  tooltip: {
    headerFormat: '<b>{series.name}</b><br/>',
    pointFormatter: function() {
      const point = this;
      return `${reverseNumber(point.x)} km: ${point.y}°C`;
    }
  }
});

---

Live demo: https://jsfiddle.net/BlackLabel/oh37t8Lb/

API Reference: https://api.highcharts.com/highcharts/tooltip.pointFormatter