Highcharts invert x and y axes

To invert the x and y axes in a Highcharts chart, you can use the chart.inverted option, which sets whether the x and y axes are swapped. By default, the value of chart.inverted is false, which means that the x axis is horizontal and the y axis is vertical. If you set it to true, the x axis will be vertical and the y axis will be horizontal.

Here's an example of how to create an inverted Highcharts column chart:

Highcharts.chart('container', {
  chart: {
    type: 'column',
    inverted: true // set the chart to be inverted
  },
  title: {
    text: 'Inverted Column Chart'
  },
  xAxis: {
    categories: ['Apples', 'Bananas', 'Oranges']
  },
  yAxis: {
    title: {
      text: 'Fruit Count'
    }
  },
  series: [{
    name: 'John',
    data: [5, 3, 4]
  }, {
    name: 'Jane',
    data: [2, 2, 3]
  }, {
    name: 'Joe',
    data: [3, 4, 4]
  }]
});

In this example, we're creating a column chart with the chart.type option set to 'column'. We're also setting chart.inverted to true to invert the chart. The x-axis categories are set with xAxis.categories, and the y-axis title is set with yAxis.title.text. The series data is defined with an array of objects that each have a name and data property.

With this configuration, the resulting chart will have the x-axis and y-axis swapped, so the bars will be vertical and the categories will be horizontal.

Customizing axis inversion in Highcharts charts: To customize axis inversion in Highcharts, you can use the inverted property in the chart configuration. Setting it to true will invert the axes. Here's an example:

Highcharts.chart('container', {
    chart: {
        type: 'line',
        inverted: true
    },
    // Other chart configuration options...
    series: [{
        name: 'Data',
        data: [1, 3, 2, 4, 5]
    }]
});

Changing axis positions in Highcharts: You can change axis positions in Highcharts using the opposite property for the x-axis and y-axis. This property determines whether the axis should be positioned on the opposite side. Example:
```
xAxis: {
    opposite: true
},
yAxis: {
    opposite: true
}
```
Invert X and Y axes in Highcharts configuration: To invert both the X and Y axes, set the inverted property to true. This will swap the horizontal and vertical axes:
```
chart: {
    inverted: true
}
```

Swapping X and Y axes in Highcharts: To explicitly swap X and Y axes in Highcharts, you can use the swapXY plugin. First, include the plugin in your script, and then use it in the chart configuration:

// Include the plugin
import SwapXY from 'highcharts/modules/swapXY';

// Use the plugin
SwapXY(Highcharts);

// Chart configuration
Highcharts.chart('container', {
    chart: {
        type: 'line',
        swapXY: true
    },
    // Other chart configuration options...
    series: [{
        name: 'Data',
        data: [1, 3, 2, 4, 5]
    }]
});

Interactive features with inverted axes in Highcharts: Interactive features work similarly with inverted axes. Tooltips, click events, and legends can be configured as usual. Here's a snippet for tooltips:
```
tooltip: {
    pointFormat: 'Value: {point.y}'
}
```
Highcharts dual-axis charts with inverted axes: For dual-axis charts with inverted axes, you can use the yAxis array to define multiple axes. Set the opposite property for secondary axes:
```
yAxis: [{
    title: {
        text: 'Primary Axis'
    }
}, {
    title: {
        text: 'Secondary Axis'
    },
    opposite: true
}]
```