Word Cloud
Note: See our Word Cloud Gallery for inspiration on all the different word cloud possibilities.
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:
{
type: 'wordcloud'
}
Data
There are two ways to provide the data for your word cloud: the text attribute and the words array.
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 (how little or often you want the specific word to appear). 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
}
]
}
Chart-Specific Properties
You can customize how the word cloud is filtered, positioned, and styled within the options object.
Note: Refer to the options JSON Configuration 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 and set the value to word (default) or character.
{
options: {
token: 'character' // 'word'
}
}
Minimum Length
Use the min-length attribute to filter out words below a specified minimum length. Provide a number value.
{
options: {
minLength: 4
}
}
Ignore Words
Use the ignore array to define words to be excluded from the word cloud. Provide the values as strings inside the array.
{
options: {
ignore: ['establish', 'this']
}
}
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.
{
options: {
maxItems: 10
}
}
Normalize
Use the normalize attribute to ignore letter casing when counting words. For example, in the demo below "Young" and "young" would be counted as the same word.
{
options: {
normalize: true
}
}
Positioning
Aspect
Use the aspect attribute to change the layout of the word cloud. Enter a value of spiral (default), flow-center, or flow-top.
{
options: {
aspect: 'flow-center' // 'spiral' | 'flow-top'
}
}
Rotate
Use the rotate attribute to rotate every other word in the cloud by 90 degrees. Provide a boolean value: true or false (default).
{
options: {
rotate: true // false
}
}
Step Angle and Radius
Use the step-angle and step-radius attributes to set the step angle and/or radius. Provide number values.
{
options: {
stepAngle: 30,
stepRadius: 30,
}
}
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.
{
options: {
maxFontSize: 50,
minFontSize: 10
}
}
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.
Color
When color-type is set to color, use the color attribute to set a single font color.
{
options: {
colorType: 'color',
color: '#4CAF50'
}
}
Palette
When color-type is set to palette, use the palette array to specify the font color palette. Provide the color values as strings inside the array.
{
options: {
colorType: 'palette',
palette: ['#2196F3', '#3F51B5', '#42A5F5', '#5C6BC0', '#64B5F6', '#7986CB', '#90CAF9', '#9FA8DA', '#BBDEFB', '#C5CAE9']
}
}
Tokens
Word clouds use the following tokens:
| Token | Description |
|---|---|
%hits |
The number of times that the word occurs in the cloud. |
%text |
The selected word in the cloud. |
Note: For more information on tokens, see our ZingChart Tokens Tutorial.
Further Customization
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.
Note: Refer to the style JSON page for a full attribute list.
Interactions
To enable some interactivity on click of a word in the wordcloud, use the label_click event.
