Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

CSS

#container {
  min-width: 310px;
  max-width: 800px;
  height: 400px;
  margin: 0 auto
}

JavaScript

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]
];

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', {
  chart: {
    type: 'spline'
  },
  xAxis: {
    reversed: false,
    title: {
      enabled: true,
      text: 'Altitude'
    },
    labels: {
      formatter: function() {
        return reverseNumber(this.value) + ' km';
      }
    }
  },
  yAxis: {
    title: {
      text: 'Temperature'
    },
    labels: {
      format: '{value}°'
    },
    lineWidth: 2
  },
  tooltip: {
    headerFormat: '<b>{series.name}</b><br/>',
    pointFormatter: function() {
      const point = this;
      return `${reverseNumber(point.x)} km: ${point.y}°C`;
    }
  },
  plotOptions: {
    spline: {
      marker: {
        enable: false
      }
    }
  },
  series: [{
    name: 'Temperature',
    data: processedData
  }]
});