Highcharts flip axes

by mariusseiceanu

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<button id="updateAxesButton" onClick="updateAxes()">Update Axis</button>
<button id="flipAxesButton" onClick="flipAxes()">Flip Axis</button>

<figure class="highcharts-figure">
    <div id="container"></div>
</figure>

JavaScript

var chart = Highcharts.chart('container', {
    chart: {
        type: 'scatter',
    },
    title: {
        text: 'Temperature vs Relative Humidity'
    },
    xAxis: {
    		id: 'x',
        title: {
            text: 'Temperature'
        },
    },
    yAxis: {
  	  	id:'y',
	      title: {
          text: 'Relative Humidity'
       }
    },
    series: [{
        name: 'Signal',
        color: 'rgba(223, 83, 83, .5)',
        id: 'signalT',
        data: [
            [174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9],
            [176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]]

    }]
});

function updateAxes() {
		const options={
    title:{
    text: 'Updated Axes'
    },
    xAxis:{
      id: 'x1',
      title: {
        style: {color: '#CE561B'},
        text: "Relative Humidity (%)"
      }
    },
    yAxis:{
      id:'y1',
      title: {
        style: {color: '#CE561B'},
        text: "Temperature"
      }
    },
    };
    
    chart.update(options, true, true, false);
		console.log('Series count =', chart.series.length);
    console.log('xAxis  count =', chart.xAxis.length);
    console.log('yAxis  count =', chart.yAxis.length);
    
    document.getElementById('flipAxesButton').disabled=true;
    document.getElementById('updateAxesButton').disabled=true;
}

function flipAxes() {
		const options={
    title:{
    text: 'Flipped Axes'
    },
    xAxis:{
      id: 'y',
      title: {
        style: {color: '#CE561B'},
        text: "Relative Humidity (%)"
      }
    },
    yAxis:{
      id:'x',
      title: {
        style: {color: '#CE561B'},
        text: "Temperature"
      }
    },
    };
    
    chart.update(options, true, true, false);
		console.log('Series count =', chart.series.length);
    console.log('xAxis  count =', chart.xAxis.length);
    console.log('yAxis  count =', chart.yAxis.length);

    document.getElementById('flipAxesButton').disabled=true;
   ...