Box plot

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

figure {
  background-color: red;
}

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'boxplot',
    inverted: true
  },
  
  title: {
    text: null
  },
  
  legend: {
  	enabled: false,
  },
  
  xAxis: [{
    categories: ['<b>Vendus</b>', '<b>Sur le marché</b>', '<b>Invendus</b>', '<b>Safti</b>']
  }],
  yAxis: {
    labels: {
      formatter: function () {
        return this.value + ' € /m²';
      }
    },
    title: {
      text: null
    },
    plotLines: [
      {
        color: '#dc3545',
        width: 2,
        zIndex: 4,
        value: 5800,
        label: {
          text: 'Estimation: <b>5 800 €</b>',
          style: {
            color: 'gray'
          }
        }
      },
    ]
  },
  plotOptions: {
    boxplot: {
      boxDashStyle: 'Dash',
      fillColor: '#b2c5d7',
      lineWidth: 0,
      medianColor: '#0C5DA5',
      medianDashStyle: 'Short',
      medianWidth: 2,
      stemColor: '#0C5DA5',
      stemDashStyle: 'dot',
      stemWidth: 1,
      whiskerColor: '#0C5DA5',
      whiskerLength: '20%',
      whiskerWidth: 3
    },
    series: {
      stickyTracking: true,
      whiskerWidth: 5
    }
  },
  series: [{
  	name: 'Statistiques des biens comparables',
    data: [
      [5556, 6000, 6500, 7200, 7459]
    ],
    tooltip: {
    	headerFormat: '<b>{series.name}</b><br /><b> {point.key}</b><br/><br/>',
      pointFormat: '<span style="color:#0C5DA5">●</span> Maximum: {point.high:,.0f} € /m²<br/><span style="color:{point.color}">●</span> Intervalle haute: {point.q3:,.0f} € /m²<br/><span style="color:#0C5DA5">●</span> Médiane: {point.median} € /m²<br/><span style="color:{point.color}">●</span> Intervalle basse: {point.q1:,.0f} € /m²<br/><span style="color:#0C5DA5">●</span> Minimum: {point.low:,.0f} € /m²'
    },
  }, {
    type: 'scatter',
    name: 'Biens comparables',
    data: [
      [0, 4703],
      [0, 5082],
      [0, 4936],
      [0, 5360],
      [0, 5482],
      [0, 5701],
      [0, 5913],
      [0, 5951],
      [0, 6335],
      [0, 4891],
      [0, 5360],
   ...