Blog Help & Support Contact About Login

 Show Nav

JavaScript Wordclouds

Word Cloud Overview

Wordclouds visually aggregate text and depict the term usages by size. They can be helpful to highlight topics or tags that are most important or most utilized. ZingChart allows you to modify the colors, size or positioning of the words in an HTML5 wordcloud to fit stylistically within your site.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type" : "wordcloud",
  "options" : {
    "text" : "...",
    "ignore" : [...],
    "max-items" : ...,
    "min-length" : ...,
    "token" : "...",
    "min-font-size" : ...,
    "max-font-size" : ...,
    "color-type" : "...",
    "color" : "...",
    "rotate" : ...,
    "palette" : [...],
    "step-angle" : ...,
    "step-radius" : ...,
    "style" : {
      ...,
      "hover-state" : {
        ...
      },
      "tooltip" : {
        "visible": true // must have this to render tooltip visible
      }
    }
  }
}

Data Format

Text String

Within the "options" object, use your text string as the value of the "text" attribute.

{
  "type":"wordcloud",
  "options":{ // Object
    "text":(Text String) // String
  }
}

Wordcloud-specific Properties

Text

The "text" attribute sets the text that will be analyzed.

{
  "type":"wordcloud",
  "options":{
    "text":"..."
  },
  /* Code omitted for brevity */
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Ignore

The "ignore" attribute allows users to define words to be excluded from the word cloud. In large text blocks, this can better synthesize your text to prevent often used but unnecessary words from diluting the word cloud.

{
  "type":"wordcloud",
  "options":{
    "text":"...",
    "ignore":["in","of","by","an","on","it","to","the","and","a"]
  },
  /* Code omitted for brevity */
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Max Items

The "max-items" attribute limits the number of words displayed to the number of max items set and will show them in descending order. If the user sets 10 items, only the top 10 words will be displayed.

{
  "type":"wordcloud",
  "options":{
    "text":"...",
    "max-items":10
  },
  /* Code omitted for brevity */
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Min Length

The "min-length" attribute is another useful mechanism to filter out the type of tokens you want analyzed. This will set the minimum length of the words being analyzed.

{
  "type":"wordcloud",
  "options":{
    "text":"...",
    "min-length":7
  },
  /* Code omitted for brevity */
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Tokens

The "token" attribute gets the type of token that will be analyzed. Can be set to "word" or "character".

{
  "type":"wordcloud",
  "options":{
    "text":"...",
    "token":"character"
  },
  /* Code omitted for brevity */
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

For a list of available attributes, please visit our JSON Syntax page.

Styling

Font

The "max-font-size" and "min-font-size" attributes allow you to change the appearance of the words.


Max Font Size

The "max-font-size" attribute defines the maximum size of the tokens used in the wordcloud.

{
  "type":"wordcloud",
  "options":{
    "text":"...",
    "max-font-size":20
  },
  /* Code omitted for brevity */
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Min Font Size

The "min-font-size" attribute defines the minimum size of the tokens used in the wordcloud.

{
  "type":"wordcloud",
  "options":{
    "text":"...",
     "min-font-size":12
  },
  /* Code omitted for brevity */
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Color Type

The "color-type" attribute defines the type of color pattern to be applied to the wordcloud.


Random

The "random" attribute sets a random palette used by the wordcloud if "color-type" is set to "random".

{
  "type":"wordcloud",
  "options":{
    "text":"...",
    "color-type":"random"
  },
  /* Code omitted for brevity */
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Color

The "color" attribute sets the color of the words when "color-type" is set to "color".

{
  "type":"wordcloud",
  "options":{
    "text":"...",
    "color-type":"color",
    "color":"#f00"
  },
  /* Code omitted for brevity */
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Palette

The "palette" attribute defines a custom palette used by the wordcloud if "color-type" is set to "palette".

{
  "type":"wordcloud",
  "options":{
    "text":"...",
    "color-type":"palette",
    "palette":["#15252d","#768766","#e5db82", ...]
  },
  /* Code omitted for brevity */
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Positioning

The "aspect", "rotate", "step-angle", and "step-radius" attributes allow you to change the position of the words.

Aspects

The "aspect" attribute controls the layout algorithm. Depending on your needs, you can choose between "spiral", "flow-center", or "flow-top".

{
  "type":"wordcloud",
  "options":{
    "text":"...",
    "aspect":"flow-center"
  },
  /* Code omitted for brevity */
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Rotate

The "rotate" attribute allows you to set whether every one or two words will rotate 90 degrees.

{
  "type":"wordcloud",
  "options":{
    "text":"...",
    "rotate":true
  },
  /* Code omitted for brevity */
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Step-Angle

When used in conjunction with the "step-radius" attribute, the "step-angle" attribute controls the step metering layout algorithm.

{
  "type":"wordcloud",
  "options":{
    "text":"...",
    "step-angle":45,
    "step-radius":50
  },
  /* Code omitted for brevity
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Step-Radius

When used in conjunction with the "step-angle" attribute, the "step-radius" attribute controls the step metering layout algorithm.

{
  "type":"wordcloud",
  "options":{
    "text":"...",
    "step-angle":45,
    "step-radius":50
  },
  /* Code omitted for brevity */
}
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.