Display second axis that is simply a mirror of the first one

[whschopke98]

I'd like to know if there is a smart way to display a second x or y-axis that is just a mirror of the main one.
The objective is to make it easier for the reader when looking at data that is far from the main axis. This way they can simply refer to the second mirrored one.
The way I have implemented this now is by creating a second axis and just copying the configurations from the main one, but this looks like a rather dumb solution. There must be an elegant way to just make it a mirror.

Here is a link to what I have: QuickChart

I'll also leave it down here:

{
  type: 'horizontalBar',
  data: {
    labels: [
      'Label 1',
      'Label 2',
      'Label 3',
      'Label 4',
      'Label 5',
      'Label 6',
    ],
    datasets: [
      {
        xAxisID: 'xBottom',
        backgroundColor: '#b7dee8',
        borderWidth: 1,
        data: [
          [0.0, 3.5],
          [3.5, 11.0],
          [5.0, 11.5],
          [8.5, 20.0],
          [0.0, 20.0],
          [15.5, 23.0],
        ],
      },
    ],
  },
  options: {
    scales: {
      yAxes: [
        {
          display: true,
          position: 'left',
          gridLines: false,
        },
      ],
      xAxes: [
        {
          id: 'xBottom',
          display: true,
          type: 'linear',
          position: 'bottom',
          ticks: {
            min: 0,
            max: 24,
            stepSize: 2,
            callback: function(val, index) {
              return index % 2 === 0 ? val : '';
              },
          },
        },
        {
          id: 'xTop',
          display: true,
          type: 'linear',
          position: 'top',
          ticks: {
            min: 0,
            max: 24,
            stepSize: 2,
            callback: function(val, index) {
              return index % 2 === 0 ? val : '';
              },
          },
        },
      ],
    },
    plugins: {
      legend: false,
      datalabels: {
        color: 'black',
        formatter: function (value) {
          return (value[1] - value[0]).toFixed(1);
        },
      },
    },
  },
}

[Udemology]

Not sure if this would help, https://youtu.be/iI5xYreE5_4. But in Chart.js 3 you can pinpoint the x2 and y2 scale without much additional code.

[whschopke98]

Thank you for the reply.
I don't know if I can use the newer version for the application I am working on, but I'll definitely look into it because it seemed to be a lot less work.