A word cloud generator.

Try it out!

• Vue

Install the package via npm.

npm install vuewordcloud

Include the code in your page via a CDN.

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuewordcloud"></script>

<vue-word-cloud
  :words="[['romance', 19], ['horror', 3], ['fantasy', 7], ['adventure', 3]]"
  :color="([, weight]) => weight > 10 ? 'DeepPink' : weight > 5 ? 'RoyalBlue' : 'Indigo'"
  font-family="Roboto"
></vue-word-cloud>

Pass custom renderer for the words.

<vue-word-cloud :words="words">
  <template slot-scope="word">
    <div style="cursor: pointer;" :title="word.weight" @click="onWordClick(word)">
      {{ text }}
    </div>
  </template>
</vue-word-cloud>

words = []

type: Array

The words to place into the cloud. A value of the array could be either an object, an array or a string.

Object: {text, weight, rotation, fontFamily, fontStyle, fontVariant, fontWeight, color}.

Array: [text, weight].

String: text.

text = ''

type: String or Function

The text of each word.

weight = 1

type: Number or Function

The weight of each word.

rotation

type: Number or Function

The rotation of each word. The units for the rotation are turns (1 turn is 360 degrees).

fontFamily = 'serif'

type: String or Function

The font family.

fontStyle = 'normal'

type: String or Function

The font style of each word. Possible values are 'normal', 'italic' and 'oblique'.

fontVariant = 'normal'

type: String or Function

The font variant of each word. Possible values are 'normal' and 'small-caps'.

fontWeight = 'normal'

type: String or Function

The font weight of each word. Possible values are 'normal', 'bold', 'bolder', 'lighter' and '100' to '900'.

color = 'Black'

type: String or Function

The color of each word.

text
weight
color
rotation
fontFamily
fontStyle
fontVariant
fontWeight

If the property is a function, it will be called with a given word as the first paramater, awaiting the corresponding attribute in return. The attribute is assigned to each word, where the attribute is not already present.

fontSizeRatio

type: Number

By default, if we have a word with a weight of 1 and a word with a weight of 500, we can only read the big word, the one are so small that it won't be readable in most cases.

If fontSizeRatio is specified, the words' font size will be scaled to respect the given ratio. For example, if the ratio equals 5, this means that the biggest word will be 5 times bigger than the smallest one, improving readability.

The value of 4 is the same as the value of 1/4. The value of 3/2 is the same as the value of 2/3.

maxFontSize = Infinity

type: Number

animationDuration = 5000

type: Number