YouTipHighcharts Area Range
# Highcharts Area Range Chart
[Highcharts Area Chart](#)
The following example demonstrates an area range chart.
We have already learned the basic configuration syntax of Highcharts in previous chapters. Next, let's look at other configurations. Modify the `type` property in the `chart` configuration.
### chart Configuration
Set the `type` property of the `chart` to `arearange`. `chart.type` describes the chart type. The default value is "line".
var chart = { type: 'arearange' };
### Example
Filename: highcharts_area_range.htm
$(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); }); });
[Try it »](#)
The output of the above example is:
[Highcharts Area Chart](#)