{"id":7789,"date":"2019-04-30T07:15:23","date_gmt":"2019-04-30T07:15:23","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=7789"},"modified":"2022-08-13T10:47:05","modified_gmt":"2022-08-13T10:47:05","slug":"create-javascript-word-cloud-chart-tutorial","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2019\/04\/30\/create-javascript-word-cloud-chart-tutorial\/","title":{"rendered":"How to Create JavaScript Word Cloud Chart \u2014 Tutorial for Web Developers"},"content":{"rendered":"<p><a href=\"https:\/\/www.anychart.com\/blog\/2019\/04\/30\/create-javascript-word-cloud-chart-tutorial\/\"><img decoding=\"async\" class=\"alignnone size-full wp-image-7791\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2019\/04\/tag-cloud-tutorial.png\" alt=\"Tutorial on how to create a JavaScript word cloud chart and customize it, for front-end web developers\" width=\"100%\" srcset=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2019\/04\/tag-cloud-tutorial.png 960w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2019\/04\/tag-cloud-tutorial-300x200.png 300w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2019\/04\/tag-cloud-tutorial-768x512.png 768w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><\/a><br \/>\nWondering how to\u00a0make\u00a0a\u00a0beautiful interactive\u00a0<a href=\"https:\/\/www.anychart.com\/chartopedia\/chart-types\/tag-cloud-chart\/\">Word Cloud<\/a>\u00a0using JS? Then you&#8217;re in the right place! In this data visualization tutorial, I&#8217;ll\u00a0guide you through the\u00a0entire development process, demonstrating it\u2019s easier to create a JavaScript word cloud chart for\u00a0an HTML5 app or web\u00a0page\u00a0than you might think!<\/p>\n<p>Also known as tag clouds, word clouds represent a\u00a0popular\u00a0visual\u00a0technique designed to reveal\u00a0how often\u00a0tags (or basically, any words)\u00a0are mentioned\u00a0in a given text body.\u00a0Essentially, the\u00a0word cloud chart type leverages diverse colors and sizes\u00a0to display at a glance different levels of relative prominence.<\/p>\n<p>Now that we&#8217;ve got an idea of what a word cloud is, let&#8217;s get down to learning how to quickly code one using JavaScript!<\/p>\n<p><!--more Read the JS charting tutorial \u00bb--><\/p>\n<h2>Building Basic JavaScript Word Cloud<\/h2>\n<p>Generally speaking, there are four basic steps to create a chart of any type using JavaScript. Just follow them, and it won\u2019t take you long to make your text data visualization look like this:<\/p>\n<p><iframe loading=\"lazy\" class=\"anychart-embed anychart-embed-DT0qy2g0\" src=\"https:\/\/playground.anychart.com\/DT0qy2g0\/iframe\" width=\"300\" height=\"150\" frameborder=\"0\" sandbox=\"allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms\" allowfullscreen=\"allowfullscreen\"><br \/>\n<\/iframe><br \/>\n<script type=\"text\/javascript\">(function(){\nfunction ac_add_to_head(el){\n\tvar head = document.getElementsByTagName('head')[0];\n\thead.insertBefore(el,head.firstChild);\n}\nfunction ac_add_style(css){\n\tvar ac_style = document.createElement('style');\n\tif (ac_style.styleSheet) ac_style.styleSheet.cssText = css;\n\telse ac_style.appendChild(document.createTextNode(css));\n\tac_add_to_head(ac_style);\n}\nac_add_style(\".anychart-embed-DT0qy2g0{width:100%;height:600px;}\");\n})();<\/script><\/p>\n<h3>1. Create an HTML page<\/h3>\n<p>First of all, create an HTML page where your JavaScript word cloud chart will appear. It has to be as follows:<\/p>\n<pre><code class=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;title&gt;JavaScript Tag Cloud Chart&lt;\/title&gt;  \r\n    &lt;style&gt;\r\n      html, body, #container {\r\n      width: 100%;\r\n      height: 100%;\r\n      margin: 0;\r\n      padding: 0;\r\n      }\r\n    &lt;\/style&gt;    \r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;div id=\"container\"&gt;&lt;\/div&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/code><\/pre>\n<p>The container that you see in the <code>&lt;body&gt;<\/code> section is intended for your future chart. The <code>width<\/code> and <code>height<\/code> parameters are responsible for the chart size, and you can specify them in percentages or in pixels to make\u00a0the chart fill as much page space as you want.<\/p>\n<h3>2. Reference all necessary files<\/h3>\n<p>Then, add the necessary <a href=\"https:\/\/www.anychart.com\">AnyChart JavaScript charting library<\/a> links into the <code>&lt;head&gt;<\/code> section in the <code>&lt;script&gt;<\/code> tags:<\/p>\n<pre><code class=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n &lt;head&gt;\r\n  &lt;title&gt;JavaScript Tag Cloud Chart&lt;\/title&gt;\r\n  &lt;script src=\"https:\/\/cdn.anychart.com\/releases\/v8\/js\/anychart-base.min.js\"&gt;&lt;\/script&gt;\r\n  &lt;script src=\"https:\/\/cdn.anychart.com\/releases\/v8\/js\/anychart-tag-cloud.min.js\"&gt;&lt;\/script&gt;\r\n  &lt;style&gt;\r\n    html, body, #container {\r\n    width: 100%;\r\n    height: 100%;\r\n    margin: 0;\r\n    padding: 0;\r\n    }\r\n  &lt;\/style&gt; \r\n &lt;\/head&gt;\r\n  &lt;body&gt;\r\n   &lt;div id=\"container\"&gt;&lt;\/div&gt;\r\n    &lt;script&gt;\r\n        &lt;!-- chart code will be here --&gt;\r\n    &lt;\/script&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/code><\/pre>\n<h3>3. Put together the data<\/h3>\n<p>The most valuable part of any chart is data.\u00a0So you should always carefully <a href=\"https:\/\/www.anychart.com\/blog\/category\/choosing-chart-type\/\">choose the chart type<\/a> depending on exactly what you want to visualize and for what purpose. Visit <a href=\"https:\/\/www.anychart.com\/chartopedia\/\">Chartopedia<\/a>, a handy tool that will tell you more about each chart type and how to use one.<\/p>\n<p>In the present case, a tag (word) cloud chart will be used\u00a0to demonstrate the 15 most spoken languages. Go to <a href=\"https:\/\/en.wikipedia.org\/wiki\/List_of_languages_by_total_number_of_speakers\" target=\"_blank\" rel=\"nofollow\">Wikipedia: List of languages by total number of speakers<\/a> and obtain the data from there:<\/p>\n<table style=\"text-align: center;\" border=\"1\" width=\"480\">\n<tbody>\n<tr>\n<td width=\"160\"><b>Language<\/b><\/td>\n<td><b>Number of speakers<\/b><\/td>\n<td><b>Family<\/b><\/td>\n<\/tr>\n<tr>\n<td>Mandarin Chinese<\/td>\n<td>1.09 billion<\/td>\n<td>Sino-Tibetan<\/td>\n<\/tr>\n<tr>\n<td>English<\/td>\n<td>983 million<\/td>\n<td>Indo-European<\/td>\n<\/tr>\n<tr>\n<td>Hindustani<\/td>\n<td>544 million<\/td>\n<td>Indo-European<\/td>\n<\/tr>\n<tr>\n<td>Spanish<\/td>\n<td>527 million<\/td>\n<td>Indo-European<\/td>\n<\/tr>\n<tr>\n<td>Arabic<\/td>\n<td>422 million<\/td>\n<td>Afro-Asiatic<\/td>\n<\/tr>\n<tr>\n<td>Malay<\/td>\n<td>281 million<\/td>\n<td>Austronesian<\/td>\n<\/tr>\n<tr>\n<td>Russian<\/td>\n<td>267 million<\/td>\n<td>Indo-European<\/td>\n<\/tr>\n<tr>\n<td>Bengali<\/td>\n<td>261 million<\/td>\n<td>Indo-European<\/td>\n<\/tr>\n<tr>\n<td>Portuguese<\/td>\n<td>229 million<\/td>\n<td>Indo-European<\/td>\n<\/tr>\n<tr>\n<td>French<\/td>\n<td>229 million<\/td>\n<td>Indo-European<\/td>\n<\/tr>\n<tr>\n<td>Hausa<\/td>\n<td>150 million<\/td>\n<td>Afro-Asiatic<\/td>\n<\/tr>\n<tr>\n<td>Punjabi<\/td>\n<td>148 million<\/td>\n<td>Indo-European<\/td>\n<\/tr>\n<tr>\n<td>Japanese<\/td>\n<td>129 million<\/td>\n<td>Japonic<\/td>\n<\/tr>\n<tr>\n<td>German<\/td>\n<td>129 million<\/td>\n<td>Indo-European<\/td>\n<\/tr>\n<tr>\n<td>Persian<\/td>\n<td>121 million<\/td>\n<td>Indo-European<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><\/p>\n<p>The magic is that all the tags in a\u00a0word\u00a0cloud chart will get their size and color automatically after you write the values and put the languages in categories in the data object:<\/p>\n<pre><code class=\"js\">\/\/ set the data\r\nvar data = [\r\n    {\"x\": \"Mandarin chinese\", \"value\": 1090000000, category: \"Sino-Tibetan\"},\r\n    {\"x\": \"English\", \"value\": 983000000, category: \"Indo-European\"},\r\n    {\"x\": \"Hindustani\", \"value\": 544000000, category: \"Indo-European\"},\r\n    {\"x\": \"Spanish\", \"value\": 527000000, category: \"Indo-European\"},\r\n    {\"x\": \"Arabic\", \"value\": 422000000, category: \"Afro-Asiatic\"},\r\n    {\"x\": \"Malay\", \"value\": 281000000, category: \"Austronesian\"},\r\n    {\"x\": \"Russian\", \"value\": 267000000, category: \"Indo-European\"},\r\n    {\"x\": \"Bengali\", \"value\": 261000000, category: \"Indo-European\"},\r\n    {\"x\": \"Portuguese\", \"value\": 229000000, category: \"Indo-European\"},\r\n    {\"x\": \"French\", \"value\": 229000000, category: \"Indo-European\"},\r\n    {\"x\": \"Hausa\", \"value\": 150000000, category: \"Afro-Asiatic\"},\r\n    {\"x\": \"Punjabi\", \"value\": 148000000, category: \"Indo-European\"},\r\n    {\"x\": \"Japanese\", \"value\": 129000000, category: \"Japonic\"},\r\n    {\"x\": \"German\", \"value\": 129000000, category: \"Indo-European\"},\r\n    {\"x\": \"Persian\", \"value\": 121000000, category: \"Indo-European\"}\r\n  ];\r\n<\/code><\/pre>\n<h3>4. Write the JS word cloud chart code<\/h3>\n<p>Now, add the <a href=\"https:\/\/api.anychart.com\/anychart#onDocumentReady\" target=\"_blank\" rel=\"nofollow\">anychart.onDocumentReady()<\/a> function to be executed when the page is ready:<\/p>\n<pre><code class=\"html\">&lt;script&gt;\r\nanychart.onDocumentReady(function() {\r\n    \/\/ code to create a word cloud chart will be here\r\n});\r\n&lt;\/script&gt;\r\n<\/code><\/pre>\n<p>After that, add the data into the function, create the tag cloud chart, set its title and legend, and just command to display it:<\/p>\n<pre><code class=\"js\">anychart.onDocumentReady(function() {\r\n  var data = [\r\n    {\"x\": \"Mandarin chinese\", \"value\": 1090000000, category: \"Sino-Tibetan\"},\r\n    {\"x\": \"English\", \"value\": 983000000, category: \"Indo-European\"},\r\n    {\"x\": \"Hindustani\", \"value\": 544000000, category: \"Indo-European\"},\r\n    {\"x\": \"Spanish\", \"value\": 527000000, category: \"Indo-European\"},\r\n    {\"x\": \"Arabic\", \"value\": 422000000, category: \"Afro-Asiatic\"},\r\n    {\"x\": \"Malay\", \"value\": 281000000, category: \"Austronesian\"},\r\n    {\"x\": \"Russian\", \"value\": 267000000, category: \"Indo-European\"},\r\n    {\"x\": \"Bengali\", \"value\": 261000000, category: \"Indo-European\"},\r\n    {\"x\": \"Portuguese\", \"value\": 229000000, category: \"Indo-European\"},\r\n    {\"x\": \"French\", \"value\": 229000000, category: \"Indo-European\"},\r\n    {\"x\": \"Hausa\", \"value\": 150000000, category: \"Afro-Asiatic\"},\r\n    {\"x\": \"Punjabi\", \"value\": 148000000, category: \"Indo-European\"},\r\n    {\"x\": \"Japanese\", \"value\": 129000000, category: \"Japonic\"},\r\n    {\"x\": \"German\", \"value\": 129000000, category: \"Indo-European\"},\r\n    {\"x\": \"Persian\", \"value\": 121000000, category: \"Indo-European\"}\r\n  ];\r\n\r\n \/\/ create a tag (word) cloud chart\r\n  var chart = anychart.tagCloud(data);\r\n\r\n   \/\/ set a chart title\r\n  chart.title('15 most spoken languages')\r\n  \/\/ set an array of angles at which the words will be laid out\r\n  chart.angles([0])\r\n  \/\/ enable a color range\r\n  chart.colorRange(true);\r\n  \/\/ set the color range length\r\n  chart.colorRange().length('80%');\r\n\r\n  \/\/ display the word cloud chart\r\n  chart.container(\"container\");\r\n  chart.draw();\r\n});\r\n<\/code><\/pre>\n<p>The JavaScript word (tag) cloud chart code should be put in the <code>&lt;script&gt;<\/code> tag from the second step. And that\u2019s it!<\/p>\n<p>Yay! You did it! Check out the <a href=\"https:\/\/playground.anychart.com\/NqAPYRCG\" target=\"_blank\" rel=\"nofollow\">beautiful JS word cloud sample you&#8217;ve made<\/a>:<\/p>\n<p><iframe loading=\"lazy\" class=\"anychart-embed anychart-embed-NqAPYRCG\" src=\"https:\/\/playground.anychart.com\/NqAPYRCG\/iframe\" width=\"300\" height=\"150\" frameborder=\"0\" sandbox=\"allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms\" allowfullscreen=\"allowfullscreen\"><br \/>\n<\/iframe><br \/>\n<script type=\"text\/javascript\">(function(){\nfunction ac_add_to_head(el){\n\tvar head = document.getElementsByTagName('head')[0];\n\thead.insertBefore(el,head.firstChild);\n}\nfunction ac_add_style(css){\n\tvar ac_style = document.createElement('style');\n\tif (ac_style.styleSheet) ac_style.styleSheet.cssText = css;\n\telse ac_style.appendChild(document.createTextNode(css));\n\tac_add_to_head(ac_style);\n}\nac_add_style(\".anychart-embed-NqAPYRCG{width:100%;height:600px;}\");\n})();<\/script><\/p>\n<h2>Customize Word Cloud Chart Appearance<\/h2>\n<p>If you want to change how your JavaScript word cloud chart look, you can easily modify it. Visit the\u00a0<a href=\"https:\/\/docs.anychart.com\/Basic_Charts\/Tag_Cloud\" target=\"_blank\" rel=\"nofollow\">Word Cloud Chart settings<\/a> and <a href=\"https:\/\/www.anychart.com\/products\/anychart\/gallery\/Tag_Cloud\/\">Word Cloud Chart gallery<\/a> pages to see the instruction on and examples of how it can be done.<\/p>\n<p>In the meantime, let&#8217;s makes some visual changes to the tag cloud built along the tutorial.<\/p>\n<h3>Tooltips in a word cloud<\/h3>\n<p>You must have noticed that in the data object, the values are in millions and billions. But it may be hard to clearly perceive such long numbers in a visual way. Therefore, it would be good to properly configure the chart tooltips with the help of the <a href=\"https:\/\/docs.anychart.com\/Common_Settings\/Text_Formatters#formatting_parameters_list\" target=\"_blank\" rel=\"nofollow\">formatting parameters list<\/a>:<\/p>\n<pre><code class=\"js\">\/\/ format the tooltips\r\nvar formatter = \"{%value}{scale:(1)(1000)(1000)(1000)|( dozen)( thousand)( million)( billion)}\";\r\nvar tooltip = chart.tooltip();\r\ntooltip.format(formatter);\r\n<\/code><\/pre>\n<p>Now <a href=\"https:\/\/playground.anychart.com\/QHEmmhdD\" target=\"_blank\" rel=\"nofollow\">the JS word cloud sample tooltips read better<\/a>, don&#8217;t they?<\/p>\n<p><iframe loading=\"lazy\" class=\"anychart-embed anychart-embed-QHEmmhdD\" src=\"https:\/\/playground.anychart.com\/QHEmmhdD\/iframe\" width=\"300\" height=\"150\" frameborder=\"0\" sandbox=\"allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms\" allowfullscreen=\"allowfullscreen\"><br \/>\n<\/iframe><br \/>\n<script type=\"text\/javascript\">(function(){\nfunction ac_add_to_head(el){\n\tvar head = document.getElementsByTagName('head')[0];\n\thead.insertBefore(el,head.firstChild);\n}\nfunction ac_add_style(css){\n\tvar ac_style = document.createElement('style');\n\tif (ac_style.styleSheet) ac_style.styleSheet.cssText = css;\n\telse ac_style.appendChild(document.createTextNode(css));\n\tac_add_to_head(ac_style);\n}\nac_add_style(\".anychart-embed-QHEmmhdD{width:100%;height:600px;}\");\n})();<\/script><\/p>\n<h3>Angles of the tags<\/h3>\n<p>If you want\u00a0your JavaScript word cloud to look sort of more \u0441haotic, you\u00a0can simply change the angles at which the\u00a0tags are arranged. For example:<\/p>\n<pre><code class=\"js\">chart.angles([0, -45, 90])\r\n<\/code><\/pre>\n<p>And <a href=\"https:\/\/playground.anychart.com\/A53XM1PV\" target=\"_blank\" rel=\"nofollow\">the JS word cloud chart sample becomes a little bit wild<\/a>:<\/p>\n<p><iframe loading=\"lazy\" class=\"anychart-embed anychart-embed-A53XM1PV\" src=\"https:\/\/playground.anychart.com\/A53XM1PV\/iframe\" width=\"300\" height=\"150\" frameborder=\"0\" sandbox=\"allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms\" allowfullscreen=\"allowfullscreen\"><br \/>\n<\/iframe><br \/>\n<script type=\"text\/javascript\">(function(){\nfunction ac_add_to_head(el){\n\tvar head = document.getElementsByTagName('head')[0];\n\thead.insertBefore(el,head.firstChild);\n}\nfunction ac_add_style(css){\n\tvar ac_style = document.createElement('style');\n\tif (ac_style.styleSheet) ac_style.styleSheet.cssText = css;\n\telse ac_style.appendChild(document.createTextNode(css));\n\tac_add_to_head(ac_style);\n}\nac_add_style(\".anychart-embed-A53XM1PV{width:100%;height:600px;}\");\n})();<\/script><\/p>\n<h3>Word cloud interactivity<\/h3>\n<p>You may also want to link tags to some web pages.\u00a0If so, use the\u00a0<a href=\"https:\/\/api.anychart.com\/anychart.charts.TagCloud#listen\" target=\"_blank\" rel=\"nofollow\">listen()<\/a> method to add an event listener to your word cloud chart. In the given case, clicking on a word will lead to its Wikipedia page opening, which means you will be able to find more information about every language:<\/p>\n<pre><code class=\"js\">\/\/ add an event listener\r\nchart.listen(\"pointClick\", function(e){\r\n  var url = \"https:\/\/en.wikipedia.org\/wiki\/\" + e.point.get(\"x\");\r\n  window.open(url, \"_blank\");\r\n});\r\n<\/code><\/pre>\n<p>Here is your <a href=\"https:\/\/playground.anychart.com\/DT0qy2g0\" target=\"_blank\" rel=\"nofollow\">final interactive JS word cloud chart<\/a>:<\/p>\n<p><iframe loading=\"lazy\" class=\"anychart-embed anychart-embed-DT0qy2g0\" src=\"https:\/\/playground.anychart.com\/DT0qy2g0\/iframe\" width=\"300\" height=\"150\" frameborder=\"0\" sandbox=\"allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms\" allowfullscreen=\"allowfullscreen\"><br \/>\n<\/iframe><br \/>\n<script type=\"text\/javascript\">(function(){\nfunction ac_add_to_head(el){\n\tvar head = document.getElementsByTagName('head')[0];\n\thead.insertBefore(el,head.firstChild);\n}\nfunction ac_add_style(css){\n\tvar ac_style = document.createElement('style');\n\tif (ac_style.styleSheet) ac_style.styleSheet.cssText = css;\n\telse ac_style.appendChild(document.createTextNode(css));\n\tac_add_to_head(ac_style);\n}\nac_add_style(\".anychart-embed-DT0qy2g0{width:100%;height:600px;}\");\n})();<\/script><\/p>\n<h2>Conclusion<\/h2>\n<p>You see there is nothing difficult in creating beautiful interactive JavaScript word cloud charts for web pages and applications, in particular using\u00a0the AnyChart JS (HTML5) charting library for data visualization.<\/p>\n<p>For more information,\u00a0check the official <a href=\"https:\/\/www.anychart.com\/\">AnyChart JS Charts<\/a>\u00a0website. The\u00a0<a href=\"https:\/\/docs.anychart.com\/\" target=\"_blank\" rel=\"nofollow\">Chart Documentation<\/a> and\u00a0<a href=\"https:\/\/api.anychart.com\/\" target=\"_blank\" rel=\"nofollow\">Chart API Reference<\/a>\u00a0sections will help you make and tune your JavaScript charts in a way you prefer, and you can freely play with the code of the charts on the\u00a0<a href=\"https:\/\/playground.anychart.com\" target=\"_blank\" rel=\"nofollow\">Chart Playground<\/a>.<\/p>\n<p>You are also welcome to check out the other basic <a href=\"https:\/\/www.anychart.com\/blog\/category\/javascript-chart-tutorials\/\">JavaScript chart tutorials<\/a> on our blog.<\/p>\n<p>Now it&#8217;s time for your questions! Feel free to ask them in the comments below or by contacting our <a href=\"https:\/\/www.anychart.com\/support\/\">Support Team<\/a>.<\/p>\n<p><!-- SyntaxHighlighter --><link rel=\"stylesheet\" href=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/styles\/default.min.css\"><link rel=\"stylesheet\" href=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/styles\/atom-one-light.min.css\"><script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/highlight.min.js\"><\/script><script>hljs.initHighlightingOnLoad();<\/script><\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>Wondering how to\u00a0make\u00a0a\u00a0beautiful interactive\u00a0Word Cloud\u00a0using JS? Then you&#8217;re in the right place! In this data visualization tutorial, I&#8217;ll\u00a0guide you through the\u00a0entire development process, demonstrating it\u2019s easier to create a JavaScript word cloud chart for\u00a0an HTML5 app or web\u00a0page\u00a0than you might think! Also known as tag clouds, word clouds represent a\u00a0popular\u00a0visual\u00a0technique designed to reveal\u00a0how often\u00a0tags (or [&hellip;]<!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,23,13,279,4],"tags":[53,127,258,44,54,32,55,36,907,141,81,57,906,905,58,65,56,904,903,244,908,909,30,172,245],"class_list":["post-7789","post","type-post","status-publish","format-standard","hentry","category-anychart-charting-component","category-html5","category-javascript","category-javascript-chart-tutorials","category-tips-and-tricks","tag-anychart","tag-chart-types","tag-charts","tag-charts-and-art","tag-data-visualization","tag-html5","tag-html5-charts","tag-javascript","tag-javascript-chart-tutorial","tag-javascript-charting","tag-javascript-charting-library","tag-javascript-charts","tag-javascript-tag-cloud","tag-javascript-word-cloud","tag-js-chart","tag-js-charting","tag-js-charts","tag-js-tag-cloud","tag-js-word-cloud","tag-tag-cloud","tag-text-data","tag-text-data-visualization","tag-tips-and-tricks","tag-tutorial","tag-word-cloud","wpautop"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Create JavaScript Word Cloud Chart: Tutorial for Web Developers<\/title>\n<meta name=\"description\" content=\"Wondering how to\u00a0create a\u00a0beautiful interactive JavaScript\u00a0Word Cloud chart? I&#039;ll\u00a0guide you through the\u00a0entire web development process, showing it\u2019s easy!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.anychart.com\/blog\/2019\/04\/30\/create-javascript-word-cloud-chart-tutorial\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create JavaScript Word Cloud Chart \u2014 Tutorial for Web Developers\" \/>\n<meta property=\"og:description\" content=\"Wondering how to\u00a0create a\u00a0beautiful interactive Word Cloud chart using JS? See this tutorial where I show it&#039;s easy!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.anychart.com\/blog\/2019\/04\/30\/create-javascript-word-cloud-chart-tutorial\/\" \/>\n<meta property=\"og:site_name\" content=\"AnyChart News\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/AnyCharts\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-30T07:15:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-13T10:47:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2019\/04\/tag-cloud-tutorial.png\" \/>\n<meta name=\"author\" content=\"Irina Maximova\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"How to Create JavaScript Word Cloud Chart \u2014 Tutorial for Web Developers\" \/>\n<meta name=\"twitter:description\" content=\"Wondering how to\u00a0create a\u00a0beautiful interactive Word Cloud chart using JS? See this tutorial where I show it&#039;s easy!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2019\/04\/tag-cloud-tutorial.png\" \/>\n<meta name=\"twitter:creator\" content=\"@AnyChart\" \/>\n<meta name=\"twitter:site\" content=\"@AnyChart\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Irina Maximova\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2019\/04\/30\/create-javascript-word-cloud-chart-tutorial\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2019\/04\/30\/create-javascript-word-cloud-chart-tutorial\/\"},\"author\":{\"name\":\"Irina Maximova\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/c79061b5c43d09368b8d44b36842b058\"},\"headline\":\"How to Create JavaScript Word Cloud Chart \u2014 Tutorial for Web Developers\",\"datePublished\":\"2019-04-30T07:15:23+00:00\",\"dateModified\":\"2022-08-13T10:47:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2019\/04\/30\/create-javascript-word-cloud-chart-tutorial\/\"},\"wordCount\":882,\"commentCount\":8,\"image\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2019\/04\/30\/create-javascript-word-cloud-chart-tutorial\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2019\/04\/tag-cloud-tutorial.png\",\"keywords\":[\"AnyChart\",\"chart types\",\"charts\",\"Charts and Art\",\"Data Visualization\",\"HTML5\",\"html5 charts\",\"JavaScript\",\"javascript chart tutorial\",\"javascript charting\",\"JavaScript charting library\",\"javascript charts\",\"javascript tag cloud\",\"javascript word cloud\",\"js chart\",\"js charting\",\"js charts\",\"js tag cloud\",\"js word cloud\",\"tag cloud\",\"text data\",\"text data visualization\",\"Tips and tricks\",\"tutorial\",\"word cloud\"],\"articleSection\":[\"AnyChart Charting Component\",\"HTML5\",\"JavaScript\",\"JavaScript Chart Tutorials\",\"Tips and Tricks\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.anychart.com\/blog\/2019\/04\/30\/create-javascript-word-cloud-chart-tutorial\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2019\/04\/30\/create-javascript-word-cloud-chart-tutorial\/\",\"url\":\"https:\/\/www.anychart.com\/blog\/2019\/04\/30\/create-javascript-word-cloud-chart-tutorial\/\",\"name\":\"How to Create JavaScript Word Cloud Chart: Tutorial for Web Developers\",\"isPartOf\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2019\/04\/30\/create-javascript-word-cloud-chart-tutorial\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2019\/04\/30\/create-javascript-word-cloud-chart-tutorial\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2019\/04\/tag-cloud-tutorial.png\",\"datePublished\":\"2019-04-30T07:15:23+00:00\",\"dateModified\":\"2022-08-13T10:47:05+00:00\",\"author\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/c79061b5c43d09368b8d44b36842b058\"},\"description\":\"Wondering how to\u00a0create a\u00a0beautiful interactive JavaScript\u00a0Word Cloud chart? I'll\u00a0guide you through the\u00a0entire web development process, showing it\u2019s easy!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2019\/04\/30\/create-javascript-word-cloud-chart-tutorial\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.anychart.com\/blog\/2019\/04\/30\/create-javascript-word-cloud-chart-tutorial\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2019\/04\/30\/create-javascript-word-cloud-chart-tutorial\/#primaryimage\",\"url\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2019\/04\/tag-cloud-tutorial.png\",\"contentUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2019\/04\/tag-cloud-tutorial.png\",\"width\":960,\"height\":640},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2019\/04\/30\/create-javascript-word-cloud-chart-tutorial\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.anychart.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create JavaScript Word Cloud Chart \u2014 Tutorial for Web Developers\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#website\",\"url\":\"https:\/\/www.anychart.com\/blog\/\",\"name\":\"AnyChart News\",\"description\":\"AnyChart JS Charts\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.anychart.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/c79061b5c43d09368b8d44b36842b058\",\"name\":\"Irina Maximova\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/023075cf0bac635343d009a289d4c3d32138b5a3890d10f09ed59755e59bc065?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/023075cf0bac635343d009a289d4c3d32138b5a3890d10f09ed59755e59bc065?s=96&r=g\",\"caption\":\"Irina Maximova\"},\"url\":\"https:\/\/www.anychart.com\/blog\/author\/irina-maximova\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create JavaScript Word Cloud Chart: Tutorial for Web Developers","description":"Wondering how to\u00a0create a\u00a0beautiful interactive JavaScript\u00a0Word Cloud chart? I'll\u00a0guide you through the\u00a0entire web development process, showing it\u2019s easy!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.anychart.com\/blog\/2019\/04\/30\/create-javascript-word-cloud-chart-tutorial\/","og_locale":"en_US","og_type":"article","og_title":"How to Create JavaScript Word Cloud Chart \u2014 Tutorial for Web Developers","og_description":"Wondering how to\u00a0create a\u00a0beautiful interactive Word Cloud chart using JS? See this tutorial where I show it's easy!","og_url":"https:\/\/www.anychart.com\/blog\/2019\/04\/30\/create-javascript-word-cloud-chart-tutorial\/","og_site_name":"AnyChart News","article_publisher":"https:\/\/www.facebook.com\/AnyCharts","article_published_time":"2019-04-30T07:15:23+00:00","article_modified_time":"2022-08-13T10:47:05+00:00","og_image":[{"url":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2019\/04\/tag-cloud-tutorial.png","type":"","width":"","height":""}],"author":"Irina Maximova","twitter_card":"summary_large_image","twitter_title":"How to Create JavaScript Word Cloud Chart \u2014 Tutorial for Web Developers","twitter_description":"Wondering how to\u00a0create a\u00a0beautiful interactive Word Cloud chart using JS? See this tutorial where I show it's easy!","twitter_image":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2019\/04\/tag-cloud-tutorial.png","twitter_creator":"@AnyChart","twitter_site":"@AnyChart","twitter_misc":{"Written by":"Irina Maximova","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.anychart.com\/blog\/2019\/04\/30\/create-javascript-word-cloud-chart-tutorial\/#article","isPartOf":{"@id":"https:\/\/www.anychart.com\/blog\/2019\/04\/30\/create-javascript-word-cloud-chart-tutorial\/"},"author":{"name":"Irina Maximova","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/c79061b5c43d09368b8d44b36842b058"},"headline":"How to Create JavaScript Word Cloud Chart \u2014 Tutorial for Web Developers","datePublished":"2019-04-30T07:15:23+00:00","dateModified":"2022-08-13T10:47:05+00:00","mainEntityOfPage":{"@id":"https:\/\/www.anychart.com\/blog\/2019\/04\/30\/create-javascript-word-cloud-chart-tutorial\/"},"wordCount":882,"commentCount":8,"image":{"@id":"https:\/\/www.anychart.com\/blog\/2019\/04\/30\/create-javascript-word-cloud-chart-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2019\/04\/tag-cloud-tutorial.png","keywords":["AnyChart","chart types","charts","Charts and Art","Data Visualization","HTML5","html5 charts","JavaScript","javascript chart tutorial","javascript charting","JavaScript charting library","javascript charts","javascript tag cloud","javascript word cloud","js chart","js charting","js charts","js tag cloud","js word cloud","tag cloud","text data","text data visualization","Tips and tricks","tutorial","word cloud"],"articleSection":["AnyChart Charting Component","HTML5","JavaScript","JavaScript Chart Tutorials","Tips and Tricks"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.anychart.com\/blog\/2019\/04\/30\/create-javascript-word-cloud-chart-tutorial\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.anychart.com\/blog\/2019\/04\/30\/create-javascript-word-cloud-chart-tutorial\/","url":"https:\/\/www.anychart.com\/blog\/2019\/04\/30\/create-javascript-word-cloud-chart-tutorial\/","name":"How to Create JavaScript Word Cloud Chart: Tutorial for Web Developers","isPartOf":{"@id":"https:\/\/www.anychart.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.anychart.com\/blog\/2019\/04\/30\/create-javascript-word-cloud-chart-tutorial\/#primaryimage"},"image":{"@id":"https:\/\/www.anychart.com\/blog\/2019\/04\/30\/create-javascript-word-cloud-chart-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2019\/04\/tag-cloud-tutorial.png","datePublished":"2019-04-30T07:15:23+00:00","dateModified":"2022-08-13T10:47:05+00:00","author":{"@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/c79061b5c43d09368b8d44b36842b058"},"description":"Wondering how to\u00a0create a\u00a0beautiful interactive JavaScript\u00a0Word Cloud chart? I'll\u00a0guide you through the\u00a0entire web development process, showing it\u2019s easy!","breadcrumb":{"@id":"https:\/\/www.anychart.com\/blog\/2019\/04\/30\/create-javascript-word-cloud-chart-tutorial\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.anychart.com\/blog\/2019\/04\/30\/create-javascript-word-cloud-chart-tutorial\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.anychart.com\/blog\/2019\/04\/30\/create-javascript-word-cloud-chart-tutorial\/#primaryimage","url":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2019\/04\/tag-cloud-tutorial.png","contentUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2019\/04\/tag-cloud-tutorial.png","width":960,"height":640},{"@type":"BreadcrumbList","@id":"https:\/\/www.anychart.com\/blog\/2019\/04\/30\/create-javascript-word-cloud-chart-tutorial\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.anychart.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create JavaScript Word Cloud Chart \u2014 Tutorial for Web Developers"}]},{"@type":"WebSite","@id":"https:\/\/www.anychart.com\/blog\/#website","url":"https:\/\/www.anychart.com\/blog\/","name":"AnyChart News","description":"AnyChart JS Charts","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.anychart.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/c79061b5c43d09368b8d44b36842b058","name":"Irina Maximova","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/023075cf0bac635343d009a289d4c3d32138b5a3890d10f09ed59755e59bc065?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/023075cf0bac635343d009a289d4c3d32138b5a3890d10f09ed59755e59bc065?s=96&r=g","caption":"Irina Maximova"},"url":"https:\/\/www.anychart.com\/blog\/author\/irina-maximova\/"}]}},"_links":{"self":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/7789","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/comments?post=7789"}],"version-history":[{"count":19,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/7789\/revisions"}],"predecessor-version":[{"id":7841,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/7789\/revisions\/7841"}],"wp:attachment":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/media?parent=7789"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/categories?post=7789"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/tags?post=7789"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}