Area range

author(s): Torstein Hønsi

by Guillaume Seguin

HTML

<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 src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
</figure>

CSS

.highcharts-figure,
.highcharts-data-table table {
    min-width: 310px;
    max-width: 800px;
    margin: 1em auto;
}

#container {
    height: 400px;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

JavaScript

Highcharts.chart('container', {
  chart: {
  	height: '199px',
  },
  title: {
    text: null
  },
  xAxis: {
    type: 'datetime'
  },
  yAxis: {
    labels: {
      format: "{value} €/m²"
    },
    title: {
      text: "",
      style: {
        color: "#242633"
      }
    },
    opposite: true
  },
/*   tooltip: {
    crosshairs: true,
    shared: true,
    valueSuffix: '°C',
    xDateFormat: '%A, %b %e'
  }, */
  "tooltip": {
  	xDateFormat: '%q %Y',
  	crosshairs: true,
    "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"
    },
    formatter: function (tooltip) {
      const defaultTooltip = tooltip.defaultFormatter.call(this, tooltip);
      defaultTooltip.push('<span style="color: 6490bd">Nombre de références : <b>3 400</b></span><br/>');
      return defaultTooltip;
    }
  },
  plotOptions: {
    arearange: {
      allowPointSelect: false
    }
  },
  series: [
        {
            "id": "MEDIAN",
            "name": "Prix median",
            "data": [
                {
                    "x": 1530403200000,
                    "y": 8375,
                    "dataLabels": {
                        "enabled": true,
                        "format": "-",
                        "style": {
                            "textOutline": "0",
                            "fontWeight": "normal",
                            "color": "#adadad"
                        }
                    },
                    "marker": {
                        "symbol": "circle",
                        "fillColor": "white",
                        "lineWidth": 1,
                        "lineColor": "#ffa000"
      ...