Highcharts Invert x-axis and y-axis
The following example demonstrates inverting the x-axis and y-axis in an area chart.
We have already learned the basic configuration syntax of Highcharts in previous chapters. Let's now look at other configurations. Add the inverted property in the chart.
Chart Configuration
Set the inverted property of the chart to true, making the X-axis vertical and the Y-axis horizontal.
var chart = {
type: 'area',
inverted: true
};
Example
Filename: highcharts_area_inverted.htm
<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts Tutorial | tutorialpro.org(tutorialpro.org)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
var chart = {
type: 'area',
inverted: true
};
var title = {
text: 'Average fruit consumption during one week'
};
var subtitle = {
style: {
position: 'absolute',
right: '0px',
bottom: '10px'
}
};
var legend = {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: -150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
};
var xAxis = {
categories: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']
};
var yAxis = {
title: {
text: 'Number of units'
},
labels: {
formatter: function () {
return this.value;
}
},
min: 0
};
var plotOptions = {
area: {
fillOpacity: 0.5
}
};
var credits = {
enabled: false
};
var series= [{
name: 'John',
data: [3, 4, 3, 5, 4, 10, 12]
}, {
name: 'Jane',
data: [1, 3, 4, 3, 3, 5, 4]
}
];
var json = {};
json.chart = chart;
json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.legend = legend;
json.plotOptions = plotOptions;
json.credits = credits;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>
The output of the above example is: