First attempt - can't get wordcloud example to work

Question

Using the "Hamlet" example from the docs - shortened text to 5 lines - but won't render for me. Also tried the "category" example - renders the amcharts logo, but nothing else.

Answer 1

This is quite surprising because these examples are working fine. See below...

First example

 am5.ready(() => { let root = am5.Root.new("chartdiv"); root.setThemes([ am5themes_Animated.new(root) ]); let series = root.container.children.push(am5wc.WordCloud.new(root, { maxCount: 100, minWordLength: 2, maxFontSize: am5.percent(35), text: "Though yet of Hamlet our dear brother's death The memory be green, and that it us befitted To bear our hearts in grief and our whole kingdom To be contracted in one brow of woe, Yet so far hath discretion fought with nature That we with wisest sorrow think on him, Together with remembrance of ourselves. Therefore our sometime sister, now our queen, The imperial jointress to this warlike state, Have we, as 'twere with a defeated joy,--" })); series.labels.template.setAll({ paddingTop: 5, paddingBottom: 5, paddingLeft: 5, paddingRight: 5, fontFamily: "Courier New" }); });

 #chartdiv { width: 100%; height: 350px; }

 <script src="https://cdn.amcharts.com/lib/5/index.js"></script> <script src="https://cdn.amcharts.com/lib/5/wc.js"></script> <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script> <div id="chartdiv"></div>

Second example

 am5.ready(() => { let root = am5.Root.new("chartdiv"); root.setThemes([ am5themes_Animated.new(root) ]); let series = root.container.children.push(am5wc.WordCloud.new(root, { categoryField: "tag", valueField: "weight", maxFontSize: am5.percent(15) })); series.labels.template.set("fontFamily", "Courier New"); setInterval(() => { am5.array.each(series.dataItems, dataItem => { let value = Math.random() * 65; value = value - Math.random() * value; dataItem.set("value", value); dataItem.set("valueWorking", value); }) }, 5000); series.data.setAll([ { tag: "JavaScript", weight: 64.96 }, { tag: "HTML/CSS", weight: 56.07 }, { tag: "Python", weight: 48.24 }, { tag: "SQL", weight: 47.08 }, { tag: "Java", weight: 35.35 }, { tag: "Node.js", weight: 33.91 }, { tag: "TypeScript", weight: 30.19 }, { tag: "C#", weight: 27.86 }, { tag: "Bash/Shell", weight: 27.13 }, { tag: "C++", weight: 24.31 }, { tag: "PHP", weight: 21.98 }, { tag: "C", weight: 21.01 }, { tag: "PowerShell", weight: 10.75 }, { tag: "Go", weight: 9.55 }, { tag: "Kotlin", weight: 8.32 }, { tag: "Rust", weight: 7.03 }, { tag: "Ruby", weight: 6.75 }, { tag: "Dart", weight: 6.02 }, { tag: "Assembly", weight: 5.61 }, { tag: "Swift", weight: 5.1 }, { tag: "R", weight: 5.07 }, { tag: "VBA", weight: 4.66 }, { tag: "Matlab", weight: 4.66 }, { tag: "Groovy", weight: 3.01 }, { tag: "Objective-C", weight: 2.8 }, { tag: "Scala", weight: 2.6 }, { tag: "Perl", weight: 2.46 }, { tag: "Haskell", weight: 2.12 }, { tag: "Delphi", weight: 2.1 }, { tag: "Clojure", weight: 1.88 }, { tag: "Elixir", weight: 1.74 }, { tag: "LISP", weight: 1.33 }, { tag: "Julia", weight: 1.29 }, { tag: "F#", weight: 0.97 }, { tag: "Erlang", weight: 0.79 }, { tag: "APL", weight: 0.65 }, { tag: "Crystal", weight: 0.56 }, { tag: "COBOL", weight: 0.53 }, ]); });

 #chartdiv { width: 100%; height: 350px; }

 <script src="https://cdn.amcharts.com/lib/5/index.js"></script> <script src="https://cdn.amcharts.com/lib/5/wc.js"></script> <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script> <div id="chartdiv"></div>