JSFiddle - React, Tailwind, and code Playground

by Dongor7

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 {
	width: 310px;
  height: 124px;
}

JavaScript

var data = [
  {
    name: 'Learn',
    weight: 1,
  },
  {
    name: 'Easygoing',
    weight: 0.9,
  },
  {
    name: 'Team Player',
    weight: 0.8,
  },
  {
    name: 'Work Experience',
    weight: 0.7,
  },
  {
    name: 'Personable',
    weight: 0.6,
  },
  {
    name: 'Mind',
    weight: 0.5,
  },
  {
    name: 'Spirit',
    weight: 0.4,
  },
  {
    name: 'Leadership',
    weight: 0.3,
  },
  {
    name: 'Leadership',
    weight: 0.2,
  },
  {
    name: 'Leadership',
    weight: 0.1,
  },
]
        
var archimedeanSpiral = function archimedeanSpiral(t) {
    t *= 0.1;
    return {
        x: t * Math.cos(t),
        y: t * Math.sin(t)
    };
};

var getRandomPosition = function getRandomPosition(size) {
  return Math.round((size * (Math.random() + 0.5)) / 2);
};
        
var getRotation = function getRotation(orientations, from, to) {
  var range = to - from,
      intervals = range / (orientations - 1),
      orientation = Math.floor(Math.random() * orientations);
  return from + (orientation * intervals);
};

var randomPlacement = function randomPlacement(point, options) {
  var field = options.field,
    r = options.rotation;
    
  return {
    x: getRandomPosition(field.width) - (field.width / 2),
    y: getRandomPosition(field.height) - (field.height / 2),
    rotation: getRotation(r.orientations, r.from, r.to)
  };
};
      
Highcharts.seriesTypes.wordcloud.prototype.spirals.archimedean = archimedeanSpiral;
Highcharts.seriesTypes.wordcloud.prototype.placementStrategy.random= randomPlacement;
      
Highcharts.chart('container', {
    chart: {
      margin: [0, 0, 0, 0],
    },
    series: [{
        colors: ['green'],
        type: 'wordcloud',
        data: data,
        /* placementStrategy: 'random',
        spiral: 'archimedean', */
    }],
    title: {
        text: null
    },
    tooltip: {
        enabled: false
    },
    subtitle: {
        text: null
    }
});