Multiple categories and series in Highcharts

Question

I have been working in an application to visualize in a single chart, multiple vertical profiles of data collected from moored buoys .

An example of this kind of visualization looks like the following example https://jsfiddle.net/ordicu85/9g035cpo/ where the chart shows two vertical profiles of o2_concentration versus the related depth measurements.

I need to solve the following issues:

1. Show only a single vertical axis(depth) common for all active series in the legend. It should be adjusted automatically for all active series in teh legend.

2. Normalize values in the vertical axis, like for example: 0, 10, 20, 30. 40...instead of all those decimal values.

Here is the highchart code where categories represent depth measurements and series represent o2_concentration measurements.The first category corresponds to first data serie and the second category target the second data series:

let chart = Highcharts.chart('container', {
chart: { type: "line", inverted: true, zoomType: "xy"
},
title: {
    text: 'o2 concentration vs depth'
},
xAxis: [
    {
     categories: [0.38, 1.02, 2.01, 3.06, 4.01, 5.05, 6, 7.05, 8.01, 9.02, 
    10.03, 11, 12.08, 13.04, 14.06, 15.07, 16.02, 17.04, 18.09, 19.03, 
    20.03, 21.04, 22.07, 23.04, 24.04, 25, 26, 27.05, 28.04, 29.06, 30.05], 
     reversed: true, title:{text:'depth'}
    },
    {
     categories: [0.37, 1.01, 2, 3, 4.03, 5.05, 6.03, 7, 8.02, 9.03, 10.01, 
     11.08, 12.03, 13.04, 14.06, 15.04, 16.01, 17, 18.03, 19.05, 20.01, 
     21.11, 22.07, 23.04, 24.09, 25.03, 26.03, 27.06, 28.01, 29.02, 30.07, 
     31, 32, 33.02, 34, 35.05, 36.02, 37.03, 38.04], reversed: true, title:
     {text:'depth'} 
    },
],
yAxis: {
    title: {
        text: 'o2 concentration'
    }
},

series: [{
    name: 'Serie A',
    data: [  95.7, 82.7, 95.4, 96.5, 97.3, 98, 98.4, 98.8, 99.1, 99.4, 99.5, 
    99.6, 99.7, 99.8, 99.9, 100, 100.1, 100.2, 100.2, 100.2, 100.1, 100.1, 
    100, 99.9, 99.9, 100, 100.1, 100.2, 100.2, 100.3, 100.4],
    xAxis:0
}, {
    name: 'Serie B',
    data: [96.7, 85.6, 92, 97.7, 98.1, 98.5, 98.9, 99.3, 99.6, 99.8, 100, 
    100.1, 100.2, 100.3, 100.4, 100.6, 100.9, 101.1, 101.2, 101.1, 101, 
    100.9, 100.9, 101, 101, 101, 101, 101.1, 101.1, 101.1, 101.1, 101.1, 
    101.1, 101.1, 101, 101, 100.9, 100.9, 100.9 ],
    xAxis:1
}]

});

Please, i would appreciate any help in those directions, i have been struggling for days with no success.

Answer 1

You are overriding the default behavior by defining 2 xAxis and setting their categories. To get what you want, let highcharts do it's thing. You will need to transform your data into {x:val1, y:val2} objects. I did it with code, because I am too lazy to type all those numbers.

var xAxis1 = [0.38, 1.02, 2.01, 3.06, 4.01, 5.05, 6, 7.05, 8.01, 9.02,
  10.03, 11, 12.08, 13.04, 14.06, 15.07, 16.02, 17.04, 18.09, 19.03,
  20.03, 21.04, 22.07, 23.04, 24.04, 25, 26, 27.05, 28.04, 29.06, 30.05
];
var xAxis2 = [0.37, 1.01, 2, 3, 4.03, 5.05, 6.03, 7, 8.02, 9.03, 10.01,
  11.08, 12.03, 13.04, 14.06, 15.04, 16.01, 17, 18.03, 19.05, 20.01,
  21.11, 22.07, 23.04, 24.09, 25.03, 26.03, 27.06, 28.01, 29.02, 30.07,
  31, 32, 33.02, 34, 35.05, 36.02, 37.03, 38.04
];
var data1 = [95.7, 82.7, 95.4, 96.5, 97.3, 98, 98.4, 98.8, 99.1, 99.4, 99.5,
  99.6, 99.7, 99.8, 99.9, 100, 100.1, 100.2, 100.2, 100.2, 100.1, 100.1,
  100, 99.9, 99.9, 100, 100.1, 100.2, 100.2, 100.3, 100.4
];
var data2 = [96.7, 85.6, 92, 97.7, 98.1, 98.5, 98.9, 99.3, 99.6, 99.8, 100,
  100.1, 100.2, 100.3, 100.4, 100.6, 100.9, 101.1, 101.2, 101.1, 101,
  100.9, 100.9, 101, 101, 101, 101, 101.1, 101.1, 101.1, 101.1, 101.1,
  101.1, 101.1, 101, 101, 100.9, 100.9, 100.9
];

for (var i = 0; i < xAxis1.length; i++) {
  data1[i] = {
    x: xAxis1[i],
    y: data1[i]
  };
}
for (i = 0; i < xAxis2.length; i++) {
  data2[i] = {
    x: xAxis2[i],
    y: data2[i]
  };
}
var chart = Highcharts.chart('container', {
  chart: {
    type: "line",
    inverted: true,
    zoomType: "xy"
  },
  title: {
    text: 'o2 concentration vs depth'
  },
  xAxis: [{
    reversed: true,
    title: {
      text: 'depth'
    }
  }, ],
  yAxis: {
    title: {
      text: 'o2 concentration'
    }
  },

  series: [{
    name: 'Serie A',
    data: data1

  }, {
    name: 'Serie B',
    data: data2

  }]
});

https://jsfiddle.net/9g035cpo/2/