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


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

  chart: {
    type: 'boxplot',
    zoomType: 'y'
  },

  title: {
    text: 'EU road accident fatalities by category, 2017'
  },
  subtitle: {
    text: 'Source: <a href="https://ec.europa.eu/eurostat/statistics-explained/index.php?title=File:Road_accident_fatalities_by_category_of_vehicles,_2017_(number_per_million_inhabitants).png">Eurostat</a>'
  },

  legend: {
    enabled: false
  },

  xAxis: {
    categories: ['Passenger cars', 'Goods vehicles', 'Buses and coaches', 'Bicycles', 'Mopeds', 'Motorcycles', 'Pedestrians'],
    title: {
      text: null
    }
  },

  yAxis: {
    title: {
      text: 'Fatalities per million inhabitants'
    },
    min: 0
  },

  tooltip: {
    formatter: function() {
      if (this.series.name == "Fatalities") {
        return "High : " + this.point.high + ' (' + this.point.countryHigh + ')<br/> Q3: ' + this.point.q3 + "<br/> Median: " + this.point.median + "<br/>Q1: " + this.point.q1 + "<br/> Low: " + this.point.low + " (" + this.point.countryLow + ")";
      } else {
        return "Fatalities: " + this.y + " (" + this.key + ")";
      }

    }
  },

  series: [{
    name: 'Fatalities',
    data: [{
        low: 9.3,
        q1: 16.52,
        median: 21.35,
        q3: 26.52,
        high: 41.3,
        countryLow: "Switzerland",
        countryHigh: "Romania"
      },
      {
        low: 0.4,
        q1: 1.175,
        median: 2.6,
        q3: 3.3,
        high: 6.1,
        countryLow: "Poland",
        countryHigh: "Greece"
      },

      {
        low: 0,
        q1: 0,
        median: 0.15,
        q3: 0.4,
        high: 0.4,
        countryLow: "Many countries",
        countryHigh: "Many countries"
      },

      {
        low: 0,
        q1: 2.22,
        median: 4.3,
        q3: 5.525,
        high: 9.7,
        countryLow: "Luxembourg",
        countryHigh: "Romania"
      },


      {
        low: 0,
        q1: 0.2,
        median: 1.25,
        q3: 1.825,
        high: 4.2,
        countryLow: "Many countries",
        countryHigh: "Portugal"
      },


      {
        low: 0,
        q1: 3.62,
        median: 6.1,
        q3: 10.025,
        high: 12.1,
        countryLow: "Estonia",
        countryHigh: "Italy"
      },

      {
        low: 0,
        q1: 4.87,
        median: 7.45,
        q3: 12.3,
        high: 23,
        countryLow: "Iceland",
        countryHigh: "Poland"
      },



    ]
  }, {
    name: 'Outliers',
    type: 'scatter',
    data: [ // x, y positions where 0 is the first category
      {
        x: 0,
        y: 45,
        name: "Croatia"
      },
      {
        x: 1,
        y: 8,
        name: "Portugal"
      },
      {
        x: 2,
        y: 5.9,
        name: "Iceland"
      },
      {
        x: 5,
        y: 20.1,
        name: "Greece"
      },
      {
        x: 6,
        y: 37.3,
        name: "Romania"
      },
      {
        x: 6,
        y: 26.2,
        name: "Latvia"
      },
    ],
    marker: {
      fillColor: 'white',
      lineWidth: 1,
      lineColor: Highcharts.getOptions().colors[3]
    },
  }]

});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.