<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/annotations.js"></script>

<div id="container" style="height: 450px; margin: auto; min-width: 310px; max-width: 600px"></div>
var chart = Highcharts.chart('container', {

  chart: {
    type: 'boxplot'
  },

  title: {
    text: 'Highcharts Box Plot Example'
  },

  legend: {
    enabled: false
  },

  xAxis: {
    //categories: ['1', '2'],
    title: {
      text: null
    },
    labels:{
      enabled:false
    }
    
  },

  yAxis: {
    title: {
      text: null
    },
    max:1050,
    min:650
  },
  tooltip: {
    formatter: function() {
      if (this.series.name == "Observations") {
        return "<b>High</b> : " + this.point.high +'<br/> <b>Q3</b>: ' + this.point.q3 + "<br/> <b>Median</b>: " + this.point.median + "<br/><b>Q1</b>: " + this.point.q1 + "<br/> <b>Low</b>: " + this.point.low ;
      } else {
        return "<b>Outliers</b>: " + this.y;
      }

    }
  },

  series: [{
    name: 'Observations',
    data: [
      {low:760, q1:801, median:848, q3:895, high:965}
    ],
    dataLabels:{
      enabled:true
    }
  },{
    name: 'Outliers',
    type: 'scatter',
    data: [ // x, y positions where 0 is the first category
      {
        x: 0,
        y: 1000
      },{
        x: 0,
        y: 700
      }
    ],
    marker: {
      fillColor: 'white',
      lineWidth: 1,
      lineColor: Highcharts.getOptions().colors[3]
    },
  }]

});



setTimeout(function () { 
  chart.addAnnotation({
     labelOptions: {
            backgroundColor: 'white',
       color:'black',
       verticalAlign: 'center',
          x:75,
       y:-15
        },
        labels: [{
            point: {              
                xAxis: 0,
                yAxis: 0,
                x: 0,
                y: 760
            },
          text:'Minimum'
        },{
            point: {              
                xAxis: 0,
                yAxis: 0,
                x: 0,
                y: 965
            },
          text:'Maximum'
        },{
            point: {              
                xAxis: 0,
                yAxis: 0,
                x: 0,
                y: 848
            },
          text:'Median'
        },{
            point: {              
                xAxis: 0,
                yAxis: 0,
                x: 0,
                y: 801
            },
          text:'1st Quartile'
        },{
            point: {              
                xAxis: 0,
                yAxis: 0,
                x: 0,
                y: 895
            },
          text:'3rd Quartile'
        },{
            point: {              
                xAxis: 0,
                yAxis: 0,
                x: 0,
                y: 1000
            },
          text:'Upper outliers'
        },{
            point: {              
                xAxis: 0,
                yAxis: 0,
                x: 0,
                y: 700
            },
          text:'Lower outliers'
        }]
    });
  
}, 1500); //1sec animation

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.