Highcharts Demo

author(s): Jon Arild Nygård

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/wordcloud.js"></script>
<div id="container"></div>

CSS

#container {
  min-width: 310px;
  max-width: 800px;
  margin: 0 auto
}

JavaScript

var team1 = [{
    "name": "Prerna",
    "weight": "40"
  },
  {
    "name": "Sonal",
    "weight": "35"
  },
  {
    "name": "Sheetal",
    "weight": "48"
  },
  {
    "name": "Priya",
    "weight": "20"
  },
  {
    "name": "Ruchi",
    "weight": "30"
  }
];

var team2 = [{
    "name": "Rahul",
    "weight": "80"
  },
  {
    "name": "Ruchi",
    "weight": "70"
  },
  {
    "name": "Tan",
    "weight": "90"
  },
  {
    "name": "Akriti",
    "weight": "40"
  },
  {
    "name": "Sagar",
    "weight": "60"
  }
];

var team3 = [{
    "name": "Prerna",
    "weight": "80"
  },
  {
    "name": "Prerna",
    "weight": "70"
  },
  {
    "name": "Leena",
    "weight": "90"
  },
  {
    "name": "Sonal",
    "weight": "40"
  },
  {
    "name": "Shreya",
    "weight": "60"
  }
];

var isNumber = Highcharts.isNumber,
  seriesData = [team1, team2, team3],
  getSeriesWeights = function(series) {
    var map = Highcharts.map,
      getMaxFromData = function(data) {
        return Highcharts.reduce(data, function(max, point) {
          if (point.weight > max) {
            max = point.weight;
          }
          return max;
        }, 0);
      },
      maxValues = map(seriesData, function(data) {
        return getMaxFromData(data);
      }),
      max = Math.max.apply(null, maxValues);
    return map(maxValues, function(value) {
      return value / max;
    });

  },
  seriesWeights = getSeriesWeights(seriesData),
  maxFontSize = 25,
  minFontSize = 1;
Highcharts.seriesTypes.wordcloud.prototype.deriveFontSize = function(
  relativeWeight
  // maxFontSize, available from v6.0.8
  // minFontSize  available from v6.0.8
) {
  var index = this.index,
    seriesWeight = seriesWeights[this.index],
    weight = isNumber(relativeWeight) ? relativeWeight : 0,
    max = isNumber(maxFontSize) ? maxFontSize : 1,
    min = isNumber(minFontSize) ? minFontSize : 1;
  return Math.floor(Math.max(min, weight * seriesWeight * max));
};

Highcharts.chart('container', {
  xAxis: [{
    width:...