How to rotate a linear graphic

Hello, recently I have generated a linear graph, but I must show it in a different position than the one shown by default.

I have used the “position” configuration in the configurations of the X and Y axes so that the X axis is shown on the left side and the Y axis on the top, the problem is that the datasets lines do not adjust to the new positions of the axes which causes an erroneous view. I have also seen some other options such as defining the axes as “categories” but this does not solve the problem either.

This is my current code that I use to generate the graphic.

var dataSets = [
      dt1 = {
        borderColor: "#434EDA",
        data: [17.28, 22.58, 27.91, 31.95, 36.32, 41.73, 45.78, 48.55, 53.48, 47.82,],
        fill: false,
        label: "Dataset1",
        pointHitRadius: 5,
        pointRadius: 5
      },
      dt2 = {
        borderColor: "#3DE383",
        data: [11.83, 20.23, 26.9, 32.39, 36.95, 41.48, 46.41, 48.82, 52.58, 49.42,],
        fill: false,
        label: "Dataset2",
        pointHitRadius: 5,
        pointRadius: 5
      },
      dt3 = {
        borderColor: "#ec0000",
        data: [14.2, 20.94, 27.36, 32.12, 36.33, 41.4, 46.58, 48.8, 52.69, 48.9,],
        fill: false,
        label: "Dataset3",
        pointHitRadius: 5,
        pointRadius: 5
      }
    ]

    var grafValues = {
      labels: ["0 mts", "1 mts", "2 mts", "3 mts", "4 mts", "5 mts", "6 mts", "7 mts", "8 mts",],
      datasets: dataSets,
    }

    var grafOptions = {
            // responsive: true,
            scales: {
                xAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: "Depth"
                        },
                        position: 'left' //X-axis position change
                }],
                yAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: "Temperature ° C"
                        },
                        position: 'top' //Y-axis position change
                }]
            },
            title: {
                display: true,
                text: "Graphic 1"
            },
            legend: {
                display: true,
                position: 'top',
                labels: {
                    boxWidth: 40,
                    fontColor: 'black'
                }
            },
            tooltips: {
                enabled: true
            }
        }

        var ctx = document.getElementById('chart-zone').getContext('2d');
        var lineChart = new Chart(ctx, {
          type: 'line',
          data: grafValues,
          options: grafOptions
        })

The idea of ​​this graph is to represent a temperature change (x axis) at different depths (y axis), so I look to rotate the graph, to get that “view”.

Thanks for your help and suggestions in advance.

[kurkle]

example

[Rovert88]

Well, I get the data as an array of arrays, and each internal array contains the data of each line. Then to disinfect or “separate” each data array I use a function that generates a dataset object, for each array, and later I add those datasets in an array that is used as data. I will find a way to adapt your suggestion to my code. I will post the results that I get.