Highcharts Area Range and Line Chart Example

Keywords : How to create area range chart with line using highcharts, Area range and line chart using highcharts with example, Highcharts area chart with range and line example

Example

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Highcharts Area Range and Line chart</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/highcharts-more.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script type="text/javascript">
        $(function () {
            var ranges = [
          [1246406400000, 14.3, 27.7],
          [1246492800000, 14.5, 27.8],
          [1246579200000, 15.5, 29.6],
          [1246665600000, 16.7, 30.7],
          [1246752000000, 16.5, 25.0],
          [1246838400000, 17.8, 25.7],
          [1246924800000, 13.5, 24.8],
          [1247011200000, 10.5, 21.4],
          [1247097600000, 9.2, 23.8],
          [1247184000000, 11.6, 21.8],
          [1247270400000, 10.7, 23.7],
          [1247356800000, 11.0, 23.3],
          [1247443200000, 11.6, 23.7],
          [1247529600000, 11.8, 20.7],
          [1247616000000, 12.6, 22.4],
          [1247702400000, 13.6, 19.6],
          [1247788800000, 11.4, 22.6],
          [1247875200000, 13.2, 25.0],
          [1247961600000, 14.2, 21.6],
          [1248048000000, 13.1, 17.1],
          [1248134400000, 12.2, 15.5],
          [1248220800000, 12.0, 20.8],
          [1248307200000, 12.0, 17.1],
          [1248393600000, 12.7, 18.3],
          [1248480000000, 12.4, 19.4],
          [1248566400000, 12.6, 19.9],
          [1248652800000, 11.9, 20.2],
          [1248739200000, 11.0, 19.3],
          [1248825600000, 10.8, 17.8],
          [1248912000000, 11.8, 18.5],
          [1248998400000, 10.8, 16.1]
            ],
      averages = [
          [1246406400000, 21.5],
          [1246492800000, 22.1],
          [1246579200000, 23],
          [1246665600000, 23.8],
          [1246752000000, 21.4],
          [1246838400000, 21.3],
          [1246924800000, 18.3],
          [1247011200000, 15.4],
          [1247097600000, 16.4],
          [1247184000000, 17.7],
          [1247270400000, 17.5],
          [1247356800000, 17.6],
          [1247443200000, 17.7],
          [1247529600000, 16.8],
          [1247616000000, 17.7],
          [1247702400000, 16.3],
          [1247788800000, 17.8],
          [1247875200000, 18.1],
          [1247961600000, 17.2],
          [1248048000000, 14.4],
          [1248134400000, 13.7],
          [1248220800000, 15.7],
          [1248307200000, 14.6],
          [1248393600000, 15.3],
          [1248480000000, 15.3],
          [1248566400000, 15.8],
          [1248652800000, 15.2],
          [1248739200000, 14.8],
          [1248825600000, 14.4],
          [1248912000000, 15],
          [1248998400000, 13.6]
      ];
            var chartitle = {
                text: 'July temperatures'
            }
            var chartxaxis = {
                type: 'datetime'
            }
            var chartyaxis = {
                title: {
                    text: null
                }
            }
            var chartooltip = {
                crosshairs: true,
                shared: true,
                valueSuffix: '°C'
            }
            var chartlegends = {
            }
            var chartseries = [{
                name: 'Temperature',
                data: averages,
                zIndex: 1,
                marker: {
                    fillColor: 'white',
                    lineWidth: 2,
                    lineColor: Highcharts.getOptions().colors[0]
                }
            }, {
                name: 'Range',
                data: ranges,
                type: 'arearange',
                lineWidth: 0,
                linkedTo: ':previous',
                color: Highcharts.getOptions().colors[0],
                fillOpacity: 0.3,
                zIndex: 0
            }]
                $('#container').highcharts({
                    title: chartitle,
                    xAxis: chartxaxis,
                    yAxis: chartyaxis,
                    tooltip: chartooltip,
                    legend: chartlegends,
                    series: chartseries
            });
        });
    </script>
 
</head>
<body>
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

Highcharts Area Range and Line Chart Example

Example

Result