Highcharts invert x and y axes

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.

Examples

  1. 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] }] });

  2. 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 }

  3. 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 }

  4. 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] }] });

  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}' }

  6. 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 }]

More Tags

angular-material-7 ubuntu-16.04 python-2.7 bin-packing end-of-line spring-kafka pyaudio cucumber-jvm zurb-foundation appearance

More Programming Guides

Other Guides

More Programming Examples