'How to rotate a linear graphic in chart.js?

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

I have seen examples of how to rotate the labels generated by the graphic, but this only works for the texts and not for the whole graphic

Currently this is my code to generate the graph

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"
                        },
                }],
                yAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: "Temperature ° C"
                        },
                }]
            },
            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
        })

<head>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  </head>
  <body>
   <canvas id="chart-zone" ></canvas>
  </body>

I hope to get a graph rotated as shown in the following image

EDIT

Investigating a little more in the documentation of chart.js I found that there is an option that allows to set the position of the axis to the "right", "left", "top" or "bottom.

Apply these options in this part of the code

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

But the problem now is that the values has disaooear because the values in the X-axis do not exist. Realize the changes in the code and you will see what I mean.

Thanks for your help and suggestions in advance.

javascript chart.js

Solution 1:^[1]

To rotate the entire chart element, as in your image, you can use the CSS rotate transform function:

#chart-zone {
  transform: rotate(90deg);
}

Note that the chart might get clipped so you would need to set the bounding size (height/width) of your container appropriately.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	timclutton

'How to rotate a linear graphic in chart.js?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]