Wordcloud

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.

Word Cloud Type

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

https://app.zingsoft.com/demos/embed/M4FXBNZ7
https://app.zingsoft.com/demos/embed/M4FXBNZ7

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 textattribute. 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
    }
  ]
}
https://app.zingsoft.com/demos/embed/MTV1Q4E1
https://app.zingsoft.com/demos/embed/MTV1Q4E1

Options 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.

https://app.zingsoft.com/demos/embed/WDUE5IPZ
https://app.zingsoft.com/demos/embed/WDUE5IPZ

Minimum Length

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

https://app.zingsoft.com/demos/embed/DDQN1UWX
https://app.zingsoft.com/demos/embed/DDQN1UWX

Ignore Words

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

https://app.zingsoft.com/demos/embed/VO6YNVOH
https://app.zingsoft.com/demos/embed/VO6YNVOH

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.

https://app.zingsoft.com/demos/embed/UX10A43B
https://app.zingsoft.com/demos/embed/UX10A43B

Positioning

Aspect

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

https://app.zingsoft.com/demos/embed/9W06OZH8
https://app.zingsoft.com/demos/embed/9W06OZH8

Rotate

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

https://app.zingsoft.com/demos/embed/HF5CVPAM
https://app.zingsoft.com/demos/embed/HF5CVPAM

Step Angle and Radius

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

https://app.zingsoft.com/demos/embed/SU7WXX2Q
https://app.zingsoft.com/demos/embed/SU7WXX2Q

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.

https://app.zingsoft.com/demos/embed/BEKJXGAQ
https://app.zingsoft.com/demos/embed/BEKJXGAQ

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.

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

https://app.zingsoft.com/demos/embed/6VLSV91M
https://app.zingsoft.com/demos/embed/6VLSV91M

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.

https://app.zingsoft.com/demos/embed/LAHSWQ9O
https://app.zingsoft.com/demos/embed/LAHSWQ9O

Tokens

Word clouds use the following tokens.

TokenDescription
%hitsThe number of times that the word occurs in the cloud.
%textThe selected word in the cloud.

Refer to the Tokens Tutorial for a full list of available tokens.

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.

https://app.zingsoft.com/demos/embed/8O4U9I14
https://app.zingsoft.com/demos/embed/8O4U9I14

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.