Chart.js How to invert (swap) axes?

Question

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.

You want a thing like that (http://jsfiddle.net/dja5xow6/) or i don't really understand ? — Ony, Jun 16 '16 at 15:22
@Onyphlax Yes that looks to be what i want, but for Chart.js not HighCharts — Justin Maat, Jun 16 '16 at 15:23
FYI - I made an example in d3 to explain what I'm talking about - http://jsfiddle.net/jmaat/0nmy5f6u/10/ — Justin Maat, Jun 16 '16 at 20:20
Maybe this comment on issue [579](https://github.com/chartjs/Chart.js/issues/579) can help you: https://github.com/chartjs/Chart.js/issues/579#issuecomment-100980002 — Raquel Guimarães, Nov 01 '17 at 20:34
Check this example that I made to another question: https://jsfiddle.net/4th6rbcw/3/ It's not perfect but it might help! — Daniel Alexandre, Apr 24 '19 at 09:57

score 2 · Answer 1 · answered Jun 03 '20 at 13:16

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',
        },
      ],
    }
  }
})

dralth · Answer 2 · 2019-05-02T18:24:54.097

I was able to accomplish this in Chart.js 2.8.0:

Change data to a list of objects with x and y. Since the intention is to swap x and y axis, put the "x data" in the y variable and vise verse. eg. [{x: 3, y: 2}, {x: 5, y: 7}, {x: 9, y: 10}]
Set the chart type to 'scatter'
Add showLines: true to the options

The outcome is a line chart where the line can be horizontal, vertical, or even double back on itself. The orientation of the line is defined by which values you put in x and which you put in y.

Here's an example configuration:

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}],
      },
    ],
  },
  options: {
    showLines: true,
    scales: {
      xAxes: [
        {
          type: 'linear',
          position: 'bottom',
        },
      ],
      yAxes: [
        {
          type: 'linear',
        },
      ],
    }
  }
})

If you're using an older version of Chart.js that doesn't have scatter plots, you can use this plugin: http://dima117.github.io/Chart.Scatter/

Chart.js How to invert (swap) axes?

2 Answers2

Linked