Blog Help & Support Contact About Login

 Show Nav

JavaScript Wordclouds

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Overview

Word clouds or text clouds aggregate text data to weigh and display the words by frequency of occurrence. They are useful for emphasizing prominent phrases or words in a given text. Browse the ZingChart Gallery for examples.

Type

In the chart object, add a "type" attribute. Set the value to "wordcloud". A basic word cloud with text data looks like this:

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Options Data

There are two ways to provide the data for your word cloud:

text attribute

You can provide the desired text, and ZingChart will aggregate the data for you. Create an "options" object, and add a "text" attribute. Provide your text data as a string value.

"options": {
  "text": "text data..."
}

words array

Alternatively, you can provide each word with an associated word count or weight. Create an "options" object, and add a "words" array. Inside the array, create an object for each word. Inside each object, add a "text" attribute. Provide your word as a string value. Next, add a "count" attribute. Provide the word count as a number value.

"options": {
  "words": [
    {
      "text": "word1",
      "count": val1
    },
    {
      "text": "word2",
      "count": val2
    },
    ...
    {
      "text": "wordN",
      "count": valN
    }
  ]
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Word Cloud Configuration

You can customize how the word cloud is filtered, positioned, and styled. Refer to the "options" JSON page for a full attribute list.

Filtering

Token

By default, ZingChart analyzes your data string per word. To change the analysis to characters, use the "token" attribute to change the analysis type: "word" (default) or "character".

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Minimum Length

Use the "min-length" attribute to filter out words below a specified minimum length. Provide a number value.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Ignore Words

Use the "ignore" array to define words to be excluded from the word cloud. Provide the values as strings inside the array.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Maximum Items

Use the "max-items" attribute to set a limit to the number of words displayed in the word cloud. Provide a number value.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Positioning

Aspect

Use the "aspect" attribute to change the layout of the word cloud: "spiral", "flow-center", or "flow-top".

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Rotate

Use the "rotate" attribute to rotate every other word in the cloud by 90 degrees. Provide a boolean value: true or false (default).

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Step Angle and Radius

Use the "step-angle" and "step-radius" attributes to set the step angle and/or radius. Provide number values.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Styling

Font Size

Use the "max-font-size" and "min-font-size" to define the maximum and/or maximum font sizes of the words displayed in the word cloud. Provide number or pixel values.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Font Color

Use the "color-type" attribute to select the type of color scheme to be applied to the word cloud: "random" (default), "color", or "palette".

Single Color

When the value is set to "color", use the "color" attribute to set a single font color.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
Color Palette

When the value is set to "palette", use the "palette" array to specify the font color palette. Provide the color values as strings inside the array.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

More Styling

Use the "style" object to further style your word cloud. You can add backgrounds and borders, as well as turn on the hover state and tooltip features. Refer to the "style" JSON page for a full attribute list.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Summary

Got a question about how wordcloud charts work? We are happy to help. Email support@zingchart.com or start a chat right here on this page for help.