- Highcharts Tutorial
- Highcharts - Home
- Highcharts - Overview
- Highcharts - Environment Setup
- Highcharts - Configuration Syntax
- Highcharts - Line Charts
- Highcharts - Area Charts
- Highcharts - Bar Charts
- Highcharts - Column Charts
- Highcharts - Pie Charts
- Highcharts - Scatter Charts
- Highcharts - Bubble Charts
- Highcharts - Dynamic Charts
- Highcharts - Combinations
- Highcharts - 3D Charts
- Highcharts - Angular Gauges
- Highcharts - Heat Maps
- Highcharts - Tree Maps
- Highcharts Useful Resources
- Highcharts - Quick Guide
- Highcharts - Useful Resources
- Highcharts - Discussion
Highcharts - Area Chart with Inverted Axes
Following is an example of a Area Chart with inverted axes.
We have already seen the configuration used to draw a chart in Highcharts Configuration Syntax chapter. Now, let us see an example of an Area Chart with inverted axes. We will also understand additional configuration and add inverted attribute in chart.
chart
Configure the inverted of the chart as true.
Configure the axes to be inverted. When true x axis is vertical and y axis is horizontal. If a bar series is present in the chart, the same will be inverted. Here, the default value is false.
var chart = { type: 'area', inverted: true };
Example
highcharts_area_inverted.htm
<html> <head> <title>Highcharts Tutorial</title> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <script src = "https://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>
Result
Verify the result.
highcharts_area_charts.htm
Advertisements
To Continue Learning Please Login
Login with Google