Is it possible to flip x & y view in LineChart?

I’m currently use vuechart-js wrapper, but it sends me to chartjs docs.

I create charts like this

But I need this. For sure I can make it with CSS, but I can’t rotate hover chart info, anyway it’s not beautiful solution, is it?

I have lbl = [0, 0.1, 0.2, 0.3 …] with fixed step for X-axis and some unpredictable data dt0 for Y-axis, but in fact it’s just dotes. When I flip data in dataset…

labels: dt0,
                    datasets: [
                        {
                            label: 'W(q) (a/2; b/2)',
                            borderColor: 'rgb(255, 99, 132)',
                            data: lbl,
                            fill: false,
                            showLine: false
                        },

…I get this

Is it possible to do that I need with Chart.js? Did I miss something? Thank you!

[etimberg]

Ah, perfect @ereborDeveloper. I was going to recommend the scatter chart. You can use the x & y axis options to control how the ticks are generated if you want different steps

[ereborDeveloper]

@benmccann @etimberg so sorry for bothering you. I found in Scatter docs, what we got {x: value, y: value} dots, so I just switched them and it works.

Here is my data update method:

            fillData() {
                let json = [];
                this.dt0 = [];
                this.dt1 = [];
                for (var k in this.chartData) {
                    let w0 = this.chartData[k][0];
                    let w1 = this.chartData[k][1];
                    if (w0 > this.maxW) {
                        w0 = this.maxW;
                    }
                    if (w0 < this.minW) {
                        w0 = this.minW;
                    }
                    if (w1 > this.maxW) {
                        w1 = this.maxW;
                    }
                    if (w1 < this.minW) {
                        w1 = this.minW;
                    }
                    var ob = {q: k, W: [w0, w1]};
                    json.push(ob)
                }
                json.sort(function (a, b) {
                    return a.q - b.q;
                });
                for (let obj in json) {
                    const q = Number(json[obj].q).toFixed(2);
                    if (q >= this.minQ && q <= this.maxQ) {
                        this.dt0.push({x: json[obj].W[0], y: q});
                        this.dt1.push({x: json[obj].W[1], y: q});
                    }
                }
                this.deflection = {
                    datasets: [
                        {
                            label: 'W(q) (a/2; b/2)',
                            borderColor: 'rgb(255, 99, 132)',
                            data: this.dt0,
                        },
                        {
                            label: 'W(q) (a/4; b/4)',
                            borderColor: 'rgb(99, 255, 132)',
                            data: this.dt1,
                        }
                    ]
                };
            }

And here is some visual