Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chart.js How to invert (swap) axes?

Taking from inspiration from this question, I am trying to figure out how to swap the axes of a Line chart in Chart.js.

For instance, in Highcharts we have this example, although it's an area chart.

Is it possible to "swap" the X and Y axis on a line chart?

datasets: [
    {
        label: "data1a",
        data: [1,2,3,4,5,1,2,3]
    }
]
yAxes: [
   {
     type: "linear",
     display: true,
     position: "left",
    }
]

Here's my fiddle modified from the above link. I'm basically trying to move it so the graph looks rotated 90 degrees. I tried changing the y position to 'top' but it still doesn't look correct.

like image 525
Justin Maat Avatar asked Jun 16 '16 15:06

Justin Maat


1 Answers

The proposal by @dralth works fine with version 2.8.0, but for some reason showLines: true does not work anymore since version 2.9.0.

It is still possible showing the lines by using the showLine property for each dataset.

In case of @dralth's example it works as follows (tested with version 2.9.3):

new Chart(document.getElementById('myChart'), {
  type: 'scatter',
  data: {
    datasets: [
      {
        label: 'My Dataset',
        data: [{x: 3, y: 2}, {x: 5, y: 7}, {x: 9, y: 10}],
        showLine: true
      },
    ],
  },
  options: {
    scales: {
      xAxes: [
        {
          type: 'linear',
          position: 'bottom',
        },
      ],
      yAxes: [
        {
          type: 'linear',
        },
      ],
    }
  }
})
like image 65
ThomaSEK Avatar answered Sep 18 '22 06:09

ThomaSEK