title: How to rotate a linear graphic in chart.js?
body: <p>I have generated a linear graph using chart js, but I must show it in a different position than the one shown by default.</p>
  
  <p>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</p>
  
  <p>Currently this is my code to generate the graph</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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
          })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
     &lt;canvas id="chart-zone" &gt;&lt;/canvas&gt;
    &lt;/body&gt;
    </code></pre>
  </div>
  </div>
  </p>
  
  <p>I hope to get a graph rotated as shown in the following image</p>
  
  <p><a href="https://i.stack.imgur.com/MWoQj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MWoQj.png" alt="enter image description here"></a></p>
  
  <p><strong>EDIT</strong></p>
  
  <p>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.</p>
  
  <p>Apply these options in this part of the code</p>
  
  <pre><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
              }]
  </code></pre>
  
  <p>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.</p>
  
  <p>Thanks for your help and suggestions in advance.</p>