<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jstat@latest/dist/jstat.min.js"></script>

<div id="container-height-male"></div>
#container-height-male {
  width: 100%;
  height: 1200px;
}
let maleWeight = [],
  maleHeight = [];
let maleColor = "blue";
let sportList = [
  "aquatics",
  "archery",
  "athletics",
  "badminton",
  "basketball",
  "canoe",
  "cycling",
  "equestrian",
  "fencing",
  "football",
  "golf",
  "gymnastics",
  "handball",
  "hockey",
  "judo",
  "modern pentathlon",
  "rowing",
  "rugby sevens",
  "sailing",
  "shooting",
  "table tennis",
  "taekwondo",
  "tennis",
  "triathlon",
  "volleyball",
  "weightlifting",
  "wrestling"
];
let allMaleHeight = [],
  sportListMale = [],
  maleTemp = [],
  deleteTab = [];

Highcharts.getJSON(
  "https://raw.githubusercontent.com/mekhatria/demo_highcharts/master/olympic2012.json?callback=?",
  function (data) {
    sportList.forEach((elmSport) => {
      data.forEach((elm) => {
        if (elm.sport == elmSport && elm.weight > 0 && elm.height > 0) {
          if (elm.gender == "male") {
            maleWeight.push(elm.weight);
            maleHeight.push(elm.height);
          }
        }
      });
      deleteTab.push({
        maleHeight,
        elmSport
      });
      maleHeight = [];
    });

    let deleteTemp = [],
      temp;
    let min, q1, median, q3, max;
    deleteTab.forEach((arr) => {
      min = jStat.min(arr.maleHeight);
      q1 = jStat.quartiles(arr.maleHeight)[0];
      median = jStat.quartiles(arr.maleHeight)[1];
      q3 = jStat.quartiles(arr.maleHeight)[2];
      max = jStat.max(arr.maleHeight);
      deleteTemp = [min, q1, median, q3, max];
      temp = arr.elmSport;
      maleTemp.push({
        deleteTemp,
        temp
      })
    });

    maleTemp.sort(function (a, b) {
      return a.deleteTemp[3] > b.deleteTemp[3] ? 1 : -1;
    });
    maleTemp.forEach((e) => {
      allMaleHeight.push(e.deleteTemp);
      sportListMale.push(e.temp);
    });

    Highcharts.chart("container-height-male", {
      chart: {
        type: "boxplot",
        inverted: true
      },
      accessibility: {
        description: ""
      },
      title: {
        text: " Male height"
      },
      xAxis: {
        categories: sportListMale,
        title: {
          text: null
        }
      },
      yAxis: {
        title: {
          text: "Height"
        },
        labels: {
          format: "{value} m"
        },
        max: 2.2
      },
      legend: {
        enabled: true
      },
      series: [
        {
          name: "Male",
          color: maleColor,
          data: allMaleHeight
        }
      ]
    });
  }
);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.