Highcharts range

by Guillaume Seguin

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

CSS

#container {
    height: 400px;
}

JavaScript

Highcharts.chart('container', {
    "title": {},
    "chart": {
    		"type": "arearange",
        "height": 225
    },
    "credits": {
        "enabled": false
    },
    "legend": {
        "layout": "horizontal",
        "align": "center",
        "verticalAlign": "bottom",
        "backgroundColor": "#FFFFFF",
        "itemStyle": {
            "fontWeight": "400"
        }
    },
    "tooltip": {
        "useHTML": false,
        "valuePrefix": "",
        "valueSuffix": " €/m²",
        "valueDecimals": 0,
        "shared": true,
        "dateTimeLabelFormats": {
            "millisecond": "%A, %b %e, %H:%M:%S.%L",
            "second": "%A, %b %e, %H:%M:%S",
            "minute": "%A, %b %e, %H:%M",
            "hour": "%A, %b %e, %H:%M",
            "day": "%A, %b %e, %Y",
            "week": "Semaine du %A, %b %e, %Y",
            "month": "%B %Y",
            "year": "%Y"
        }
    },
    "yAxis": {
        "labels": {
            "format": "{value} €/m²"
        },
        "title": {
            "text": "",
            "style": {
                "color": "#242633"
            }
        },
        "opposite": true
    },
    "xAxis": {
        "type": "datetime",
        "labels": {}
    },
    "plotOptions": {
        "arearange": {
            "color": "#6490bd",
            "opacity": 0.4,
            "allowPointSelect": false
        },
        "spline": {
            "color": "#6490bd"
        }
    },
    "series": [
        {
            "id": "MEDIAN",
            "name": "Prix median",
            "data": [
                {
                    "x": 1530403200000,
                    "y": 8375,
                    "dataLabels": {
                        "enabled": true,
                        "format": "-",
                        "style": {
                            "textOutline": "0",
                            "fontWeight": "normal",
                            "color": "#adadad"
                        }
                    },
    ...