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.
Source:stackexchange.com