single y-axis with multiseries, tickmarks on same y-axis for min and max of each series, highchart

Question

enter image description here single y-axis with multiseries, tickmarks on same y-axis for min and max of each series, highchart.

The tick marks should come top most first series max, 2nd top 2nd series max and so on ... , Similarly min should come at the bottom and so on...

How can we achieve this in highcharts. attaching the image for requirement reference.

Tried with tickpositioner but it isn't working for series having similar or same max and min data points.

Answer 1

Using a single y-axis is not possible, because each series has its own scale. However, you can generate a separate y-axis (with calculated extremes and tick positions) for each series and it will look exactly the same way as in the picture.

For example:

const series = [...];

const yAxis = series.map((s, index) => {
  const yData = s.data.map(el => el[1]);
  const dataMax = Math.max(...yData);
  const dataMin = Math.min(...yData);

  const col = 0 + Math.floor(index / cols);
  const row = index - rows * col;

  const diff = Math.abs(dataMax - dataMin);
  const step = diff / tickAmount;
  const realDiff = diff + step * Math.pow(row, 2);
  
  const min = dataMin - (realDiff / tickAmount * row);
  const max = dataMax + (realDiff / tickAmount * row);

  const tick1 = dataMin;
  const tick2 = dataMax;

  return {
    labels: {
      style: {
        color: s.color
      }
    },
    tickPositions: [tick1, tick2],
    min,
    max,
    startOnTick: false,
    endOnTick: false,
    title: null,
    offset: col * 30
  };
});

---

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

API Reference: https://api.highcharts.com/highcharts/yAxis