Highcharts Area Range Chart
The following example demonstrates an area range chart.
We have already learned the basic configuration syntax of Highcharts in previous chapters. Now, let's look at other configurations. Modify the type property in the chart.
Chart Configuration
Set the chart's type property to 'arearange'. The chart.type describes the type of the chart. The default value is "line".
var chart = {
type: 'arearange'
};
Example
Filename: highcharts_area_range.htm
<html>
<head>
<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>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/data.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: 'arearange',
zoomType: 'x'
};
var title = {
text: 'Temperature variation by day'
};
var xAxis = {
type: 'datetime'
};
var yAxis = {
title: {
text: null
}
};
var tooltip = {
shared: true,
crosshairs: true,
valueSuffix: '\xB0C'
};
var legend = {
enabled: false
}
var json = {};
json.chart = chart;
json.title = title;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.legend = legend;
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=range.json&callback=?', function (data) {
var series= [{
name: 'Temperatures',
data: data
}
];
json.series = series;
$('#container').highcharts(json);
});
});
</script>
</body>
</html>
The above example will output: