score: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: stackoverflow.com
Related Query
- chart.js switch x/y axis on line chart
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- show label in tooltip but not in x axis for chartjs line chart
- Show X axis on top and bottom in line chart rendered with Chart.js 2.4.0
- Obtain max value of y axis of line chart rendered with Chart.js
- Changing x axis labels in Chart.js line chart
- Line chart with large number of labels on X axis
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- Map event position to y axis value in chartjs line chart
- How to start the line graph from the left Y axis in a line/bar mixed chart (Chart.js)?
- chartjs - multi axis line chart - cannot read property 'min' of undefined
- Change Axis Line color in Chart created using chart.js
- display vertical axis label in line chart using chart.js
- Chart.js - how to make proportional intervals on X axis on line chart
- Chart.js two y axes line chart tooltip value incorrect for 2nd y axis
- Chart with Time axis only displaying first grid line and tick label (unitStepSize)
- How do you set x and y axis and Title for a line chart using charts.js?
- How to use chart.js to plot line chart with x axis as time stamp in seconds
- X and Y axis labels not displaying on line chart (Chart.js)
- X axis should have a space in Line chart- Chart JS
- Django chart.js multi axis line chart
- Google Charts, HighCharts or ChartJS Dual Axis Gantt Chart and Line Chart Visualization
- How to start Y Axis Line at 0 from right for negative values in chart js 2?
- How to Add X axis Padding in chart js Line Graph
- hereChartJS Line Chart with Time Axis
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- ChartJs line chart time cartesian axis number of ticks and wierd offset
- Line chart plotting multiple points for duplicate data on x and y axis using chart.js
- Multiple Axis Line Chart
- Aligning zero on y axis to the labels on x axis of line chart in chartjs
More Query from same tag
- How can I pass my sqlite data to django, and make chart?
- How to remove the coloured rectangle(dataset label) in chartJS
- Chart.js not updating or receiving data from Flask python
- Legends for line charts in Chart.js
- ChartJS, nested flexbox, not shrinking
- How to integrate charts with js and jQuery?
- Getting "Uncaught TypeError: Cannot read properties of undefined (reading 'map')" when using Chartjs inside react axios method
- Chart.JS plugin, draw after animation
- ChartJs different data for Tooltips
- Using Chart.js - The X axis labels are not all showing
- ChartJS: subsequent charts hide previous charts
- how to hide specific dataset based on condition chartjs angular
- Can Chart.js Horizontal bar work with time series data?
- angular chartjs line chart default options
- Stacked line chart not displaying correctly when Xaxis is time
- Chartjs: How can I group datasets closer if I have maxBarThickness set?
- TS how can I use a class variable inside method?
- Chart JS : Display the percentage of labels without getContext('2d')
- Chart.js animation triggered only on hover?
- How to draw a chart with Chart.JS?
- angular chartjs not showing data properly
- White Space in stacked bar using chart.js
- How to change the color of the bar in barchart if the data is negative - Angular Charts
- Chart.js line graph not displaying when using formatted timestamp labels
- React - Display Chart when button is clicked
- Price history with chart js
- Chartjs showing labels for bidimensional array
- How to get chart size (without labels) with chart.js?
- Including Chart.js in a webpage without node.js and without CDN
- How to edit my custom tooltips in my line chart using chart.js?