Tag Cloud | Basic Charts | AnyChart Documentation

Still have questions?
Contact support

Overview
Modules
Quick Start
General Settings
Special Settings

Overview

A tag cloud, otherwise known as a word cloud or weighted list, is a visual representation of text data. This chart is typically used to show keyword metadata (tags) on websites or to visualize free-form text. Tags are usually single words, and the importance of each tag, which is often based on its frequency, is shown with font size or color.

This article explains how to create a basic Tag Cloud chart as well as configure settings that are specific to the type. You can also see the table below to get a brief overview of the Tag Cloud's characteristics:

API
Modules	Core + Tag Cloud
Class	anychart.charts.TagCloud
DATA
Data Fields	x, value, category
Multiple Series	N/A
OPTIONS
Stacked	N/A
Vertical	N/A
3D	N/A
Error Bars	N/A
SUPPORTED CHART PLOTS
Polar	N/A
Radar	N/A
Scatter	N/A
Stock	N/A
RELATED TYPES
	Word Tree
SEE ALSO
	Chartopedia: Tag Cloud
	General Settings

Modules

The Tag Cloud requires adding the Core and Tag Cloud modules:

<script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-core.min.js"></script>

<script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-tag-cloud.min.js"></script>

Learn more: Modules.

Quick Start

To create a Tag Cloud, use the anychart.tagCloud() chart constructor, like in the following sample:

var data = [
  {x: "learning", value: 80},
  {x: "includes", value: 56},
  {x: "lists", value: 44},
  {x: "meaning", value: 40},
  {x: "useful", value: 36},
  {x: "different", value: 32}
];

// create a chart and set the data
chart = anychart.tagCloud(data);

// set the container id
chart.container("container");

// initiate drawing the chart
chart.draw();

General Settings

In AnyChart there are many settings that are configured in the same way for all chart types, including the Tag Cloud chart (for example, legend settings).

Read the overview of general settings: General Settings.

Special Settings

Data

Data for a Tag Cloud can be passed to the chart constructor anychart.tagCloud() or to the data() method.

There are two ways to create data: you can add either a list of words or a text.

List

When you add a list of words (or other elements), you have to specify their frequencies. Use the following data fields:

x to set words
value to set frequencies
category to set categories

This is how working with x and value looks like:

// create data
var data = [
  {"x": "learning", value: 80},
  {"x": "includes", value: 56},
  {"x": "lists", value: 44},
  {"x": "meaning", value: 40},
  {"x": "useful", value: 36},
  {"x": "different", value: 32},
  {"x": "grammar", value: 28},
  {"x": "teaching", value: 24},
  {"x": "example", value: 20},
  {"x": "thing", value: 12},
];

// create a chart and set the data
chart = anychart.tagCloud(data);

The category field is optional: it colors elements of the chart according to the categories they belong to. Also, it affects the ordinal color scale and legend - see the Color Scale: Categories and Legend sections to learn more.

Text

When you add just a text, the next step is to parse it into elements and calculate their frequencies. For parsing, use the data() method with settings listed in anychart.data.TextParsingSettings:

cutLength cuts the length of words
ignoreItems adds a list of ignored elements
ignoreTrailingSpaces ignores trailing spaces
maxItems sets the number of the most frequent elements to be displayed
maxLength ignores elements longer than a certain value
minLength ignores elements shorter than a certain value
mode sets the parsing mode

The parsing mode, unlike other settings, must be always specified. There are two parsing modes:

byWord for parsing text into words
byChar for parsing text into characters

If the only thing you want to set is the mode, you can use a shortcut from anychart.anychart.enums.TextParsingMode:

chart.data("Tyger, tyger, burning bright", "by-char");

The following sample shows how to work with parsing settings. It is a Tag Cloud with the 16 most frequent words in William Blake's poem "The Tyger", some function words ignored:

// create data
var data = "Tyger, tyger, burning bright " +
           "In the forests of the night, " +
           "What immortal hand or eye " +
           "Could frame thy fearful symmetry? ";

// set the parsing mode and configure parsing settings
chart.data(data, {
        mode: "byWord",
        maxItems: 16,
        ignoreItems: [
                      "the",
                      "and",
                      "he",
                      "or",
                      "of",
                      "in",
                      "thy"
                     ]
});

Appearance

The appearance settings of a Tag Cloud can be configured in three states: normal, hover, and selected. Use the normal(), hovered(), and selected() methods.

Combine them with the following methods:

fill() to set the fill
stroke() to set the stroke
fontFamily() to set the font family - Verdana, Helvetica, Arial, etc.
fontSize() to set the font size
fontStyle() to set the font style - normal, italic, oblique
fontVariant() to set the font variant - normal or small caps
fontWeight() to set the font weight
other methods from anychart.core.StateSettings

Note: If settings are specified only for the normal state, they are inherited by the hover and selected states. The only exception is the fill: the selected state does not inherit its settings (but the hover state does).

In this sample, there is a Tag Cloud with appearance settings configured:

// configure the visual settings of the chart
chart.normal().fill("#1fadad");
chart.hovered().fill("#93bfec");
chart.selected().fill("#1f66ad");
chart.normal().stroke("#0f5757");
chart.hovered().stroke("#0f3357");
chart.selected().stroke("#0f3357");
chart.normal().fontWeight(600);

Color Scale

By default, elements are colored in the colors of the default palette. You can also create a color scale, linear or ordinal, and add a color range.

Linear

To create a linear color scale, use the linearColor() constructor.

Combine it with colors() to set two colors: the second one is applied to the most frequent element, and the first one indicates 0. Elements of frequencies that lie within this range are colored automatically in different mixtures of these two colors, and if you do not specify them, the default colors of the linear color scale are used.

To set your scale as the color scale of the chart, use the colorScale() method.

Optionally, you can use colorRange() to enable a color range - a special interactive element representing the color scale. With the linear color scale, it looks like a gradient from the first to the second color. You can find the available settings here: anychart.core.ui.ColorRange.

The following sample shows a Tag Cloud with a linear color scale and a color range:

// create and configure a color scale.
var customColorScale = anychart.scales.linearColor();
customColorScale.colors(["#ffcc00", "#00ccff"]);

// set the color scale as the color scale of the chart
chart.colorScale(customColorScale);

// add and configure a color range
chart.colorRange().enabled(true);
chart.colorRange().length("90%");

Ordinal

To create an ordinal color scale, use the ordinalColor() constructor.

Then call ranges() to set frequency ranges (two or more) you want to be marked by different colors. You can set a color for each of these ranges by using the colors() method. Please note that if you do not specify colors and ranges, the default settings of the ordinal color scale are used.

Finally, call colorScale() to set your scale as the color scale of the chart.

Optionally, you can use colorRange() to add a color range - a special interactive element representing the color scale. With the ordinal color scale, the color range shows the ranges and their colors. You can find the available settings here: anychart.core.ui.ColorRange.

In this sample, there is a Tag Cloud with an ordinal color scale and a color range:

// create and configure a color scale.
var customColorScale = anychart.scales.ordinalColor();
customColorScale.ranges([
  {less: 50},
  {from: 50, to: 60},
  {greater: 60}
]);
customColorScale.colors(["lightgray", "#ffcc00", "#00ccff"]);

// set the color scale as the color scale of the chart
chart.colorScale(customColorScale);

// add and configure a color range
chart.colorRange().enabled(true);
chart.colorRange().length("90%");

Categories

Instead of frequency ranges, the ordinal color scale and the color range can indicate the categories of data. Add the category field to your data to set categories, then specify colors for the scale:

// create data   
var data = [
  {x: "learning", value: 80, category: "noun"},
  {x: "includes", value: 56, category: "verb"},
  {x: "lists", value: 44, category: "noun"},
  {x: "meaning", value: 40, category: "noun"},
  {x: "useful", value: 36, category: "adjective"},
  {x: "different", value: 32, category: "adjective"},
  {x: "grammar", value: 28, category: "noun"},
  {x: "teaching", value: 24, category: "noun"},
  {x: "example", value: 20, category: "noun"},
  {x: "thing", value: 12, category: "noun"}
];

// create and configure a color scale.
var customColorScale = anychart.scales.ordinalColor();
customColorScale.colors(["#00b8e6", "#e6b800", "#ff4d4d"]);

// set the color scale as the color scale of the chart
chart.colorScale(customColorScale);

// add a color range
chart.colorRange().enabled(true);

Angles

Every element on a Tag Cloud chart is rotated by a certain angle. To configure these angles, use the following methods:

angles() specifies the set of angles
anglesCount() sets the number of angles
fromAngle() sets the first angle in a range
toAngle() sets the last angle in a range

You can specify the set of angles to be used in your chart by passing an array of angles to angles():

// configure angles
chart.angles([0, 30, 90]);

There is also another way to configure angles. Call fromAngle() and toAngle() to set the first and the last angle in a range, then call anglesCount() to set the total number of angles. The defaults are: 0°, 90°, and 2.

In this sample the number of angles is 5, the first angle is 10°, the last is 100°, and 3 angles lying between them are calculated automatically:

// configure angles
chart.fromAngle(10);
chart.toAngle(100);
chart.anglesCount(5);

Text Spacing

The textSpacing() method allows you to change the spacing between elements of your Tag Cloud chart. The default value is 1.

In the sample below the spacing is set to 15:

// set text spacing
chart.textSpacing(15);

Mode

There are two modes of positioning elements on a Tag Cloud: spiral (default) and rectangle. To set the mode, use the mode() method with either "spiral" or "rect" as a parameter - see anychart.enums.TagCloudMode:

// set the mode of the tag cloud
chart.mode("rect");

Scales

To learn about scales in general, see the Scales section.

If frequencies of elements cover a large range, the font size of the least frequent elements tends to be too small. You can prevent this situation with the help of the logarithmic scale.

Use the log() method to create a logarithmic scale and scale() to set it as the value scale of your chart:

/* create a logarithmic scale and set it
as the value scale of the chart */
tagCloud2.scale(anychart.scales.log());

Tooltips

A Tooltip is a text box displayed when a point on a chart is hovered over. There is a number of visual and other settings available: for example, you can edit the text by using font settings and text formatters, change the style of background, adjust the position of a tooltip, and so on.

Tokens

To change the text of tooltips, use tokens with the format() method combined with tooltip().

The {%value} token returns the frequency of an element, and {%yPercentOfTotal} returns the percentage frequency. By default, both are shown.

Also, you can always add a custom field to your data and use a custom token corresponding to it.

This sample shows how to work with tokens:

// create data   
var data = [
  {x: "learning", value: 80, custom_field: "info 1"},
  {x: "includes", value: 56, custom_field: "info 2"},
  {x: "lists", value: 44, custom_field: "info 3"},
  {x: "meaning", value: 40, custom_field: "info 4"},
  {x: "useful", value: 36, custom_field: "info 5"},
  {x: "different", value: 32, custom_field: "info 6"},
  {x: "grammar", value: 28, custom_field: "info 7"},
  {x: "teaching", value: 24, custom_field: "info 8"},
  {x: "example", value: 20, custom_field: "info 9"},
  {x: "thing", value: 12, custom_field: "info 10"}
];

// create a chart and set the data
var chart = anychart.tagCloud(data);

// configure tooltips
chart.tooltip().format("{%yPercentOfTotal}% ({%value})\n\n{%custom_field}");

Formatting Functions

To configure tooltips, you can use formatting functions instead of tokens.

You can also add a custom field to your data and refer to it by using the getData() method.

In the sample below, there is a function modifying the format of tooltips depending on percentage frequencies of elements, and a custom data field is used:

// create data   
var data = [
  {x: "learning", value: 80, custom_field: "info 1"},
  {x: "includes", value: 56, custom_field: "info 2"},
  {x: "lists", value: 44, custom_field: "info 3"},
  {x: "meaning", value: 40, custom_field: "info 4"},
  {x: "useful", value: 36, custom_field: "info 5"},
  {x: "different", value: 32, custom_field: "info 6"},
  {x: "grammar", value: 28, custom_field: "info 7"},
  {x: "teaching", value: 24, custom_field: "info 8"},
  {x: "example", value: 20, custom_field: "info 9"},
  {x: "thing", value: 12, custom_field: "info 10"}
];

// create a chart and set the data
var chart = anychart.tagCloud(data);

// enable HTML for tooltips
chart.tooltip().useHtml(true);

// configure tooltips
chart.tooltip().format(function() {
  var percentOfTotal = (this.getData("value")*100)/this.getStat("sum");
  if (percentOfTotal < 7)
    return percentOfTotal.toFixed(1) +
           "%<br></br><br></br>" + this.getData("custom_field");
  if (percentOfTotal > 15)
    return "<span style='font-size:26'>" +
           percentOfTotal.toFixed(1) +
           "%</span><br><br>" +
           this.getData("custom_field");
  return "<span style='font-size:18'>" +
         percentOfTotal.toFixed(1) +
         "%</span><br><br>" +
         this.getData("custom_field");
});

Legend

Adding the "category" field to the data colors elements of the chart according to the categories they belong to. In this case, the source of legend items is automatically set to "categories", causing them to represent categories:

// create data   
var data = [
  {x: "learning", value: 80, category: "noun"},
  {x: "includes", value: 56, category: "verb"},
  {x: "lists", value: 44, category: "noun"},
  {x: "meaning", value: 40, category: "noun"},
  {x: "useful", value: 36, category: "adjective"},
  {x: "different", value: 32, category: "adjective"},
  {x: "grammar", value: 28, category: "noun"},
  {x: "teaching", value: 24, category: "noun"},
  {x: "example", value: 20, category: "noun"},
  {x: "thing", value: 12, category: "noun"}
];

// create a chart and set the data
chart = anychart.tagCloud(data);

// enable the legend
chart.legend(true);

Interactivity

You might want to link elements of a Tag Cloud to web pages. In this case, use the listen() method to add an event listener to your chart. Specify the event type you want to trigger the action and the action itself (opening a web page).

For example, here clicking on a word leads to its page opening in Wiktionary:

// add an event listener
chart.listen("pointClick", function(e){
  var url = "//en.wiktionary.org/wiki/" + e.point.get("x");
  window.open(url, "_blank");
});