[Chartjs]-Chart.js switch x/y axis on line chart

by

0👍

I haven’t been able to find anything that indicates you can do it with a line graph, but you could do it with scatter. The first step is abstracting away the axis properties from xAxes and yAxes: 

const xAxis = [{
    /*type: 'time', time: { displayFormats: {} }, whatever*/
}];

const revenueAxis = [{
    /*scaleLabel: {}, ticks: {}, whatever*/
}];

Then you decide which data set to put on which axis by whatever condition you define: 

let swapAxes = true;
const xValues = [1,2,3,4,5];
const yValues = [5,4,3,2,1];
let data = [];

const zipper = (a, b) => {
    for (let i of a) data.push({x: a[i-1], y: b[i-1]});
    return data;
}

data = condition ? zipper(yValues , xValues) : zipper(xValues, yValues );

You’ll notice that each action in zipper() pushes an object with the values x and y onto an array. This is how chartjs is set up to receive data (an array of objects containing the values x and y), so make sure you follow that pattern.

Now set the axes: 

const options = {
    /*Whatever options you have*/,
    scales: {
        xAxes: condition ? yAxis : xAxis,
        yAxes: condition ? xAxis : yAxis
    }
}

Now if you put that in your code, all you have to do is toggle condition to switch axes.

Leave a comment