Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/plugins/wordCloud.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/spiritedaway.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>
              
            
!

CSS

              
                body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 600px;
}
              
            
!

JS

              
                // Themes begin
am4core.useTheme(am4themes_spiritedaway);
am4core.useTheme(am4themes_animated);
// Themes end

var chart = am4core.create("chartdiv", am4plugins_wordCloud.WordCloud);
chart.fontFamily = "Courier New";
var series = chart.series.push(new am4plugins_wordCloud.WordCloudSeries());
series.randomness = 0.1;
series.rotationThreshold = 0.5;

series.data = [
  {
    "word": "add",
    "count": 2064
  },
  {
    "word": "use",
    "count": 1617
  },
  {
    "word": "fix",
    "count": 1450
  },
  {
    "word": "drop",
    "count": 854
  },
  {
    "word": "specs",
    "count": 588
  },
  {
    "word": "job",
    "count": 555
  },
  {
    "word": "new",
    "count": 544
  },
  {
    "word": "method",
    "count": 427
  },
  {
    "word": "update",
    "count": 424
  },
  {
    "word": "data",
    "count": 393
  },
  {
    "word": "task",
    "count": 393
  },
  {
    "word": "remove",
    "count": 379
  },
  {
    "word": "version",
    "count": 369
  },
  {
    "word": "[ci skip]",
    "count": 354
  },
  {
    "word": "make",
    "count": 332
  },
  {
    "word": "class",
    "count": 317
  },
  {
    "word": "spec",
    "count": 316
  },
  {
    "word": "rename",
    "count": 277
  },
  {
    "word": "offers",
    "count": 273
  },
  {
    "word": "improve",
    "count": 264
  },
  {
    "word": "implement",
    "count": 240
  },
  {
    "word": "backend",
    "count": 239
  },
  {
    "word": "company",
    "count": 232
  },
  {
    "word": "refactor",
    "count": 231
  },
  {
    "word": "feed",
    "count": 230
  },
  {
    "word": "api",
    "count": 230
  },
  {
    "word": "set",
    "count": 224
  },
  {
    "word": "controller",
    "count": 220
  },
  {
    "word": "adapter",
    "count": 219
  },
  {
    "word": "model",
    "count": 208
  },
  {
    "word": "instead",
    "count": 204
  },
  {
    "word": "kanyotoku",
    "count": 199
  },
  {
    "word": "legacy",
    "count": 199
  },
  {
    "word": "move",
    "count": 188
  },
  {
    "word": "upgrade",
    "count": 187
  },
  {
    "word": "template",
    "count": 186
  },
  {
    "word": "column",
    "count": 184
  },
  {
    "word": "extend",
    "count": 181
  },
  {
    "word": "adjust",
    "count": 177
  },
  {
    "word": "display",
    "count": 176
  },
  {
    "word": "search",
    "count": 174
  },
  {
    "word": "cleanup",
    "count": 172
  },
  {
    "word": "name",
    "count": 171
  },
  {
    "word": "test",
    "count": 171
  },
  {
    "word": "typo",
    "count": 170
  },
  {
    "word": "-",
    "count": 169
  },
  {
    "word": "offer",
    "count": 164
  },
  {
    "word": "logic",
    "count": 156
  },
  {
    "word": "load",
    "count": 154
  },
  {
    "word": "first",
    "count": 149
  },
  {
    "word": "check",
    "count": 149
  },
  {
    "word": "area",
    "count": 149
  },
  {
    "word": "change",
    "count": 148
  },
  {
    "word": "readme",
    "count": 143
  },
  {
    "word": "via",
    "count": 138
  },
  {
    "word": "rake",
    "count": 135
  },
  {
    "word": "export",
    "count": 134
  },
  {
    "word": "rails",
    "count": 131
  },
  {
    "word": "xml",
    "count": 130
  },
  {
    "word": "file",
    "count": 130
  },
  {
    "word": "simple",
    "count": 128
  },
  {
    "word": "define",
    "count": 125
  },
  {
    "word": "provide",
    "count": 125
  },
  {
    "word": "show",
    "count": 125
  },
  {
    "word": "work",
    "count": 124
  },
  {
    "word": "scope",
    "count": 124
  },
  {
    "word": "example",
    "count": 124
  },
  {
    "word": "helper",
    "count": 123
  },
  {
    "word": "absolventa",
    "count": 122
  },
  {
    "word": "persist",
    "count": 122
  },
  {
    "word": "factory",
    "count": 120
  },
  {
    "word": "refine",
    "count": 119
  },
  {
    "word": "endpoint",
    "count": 117
  },
  {
    "word": "joboffer",
    "count": 116
  },
  {
    "word": "link",
    "count": 116
  },
  {
    "word": "user",
    "count": 115
  },
  {
    "word": "another",
    "count": 115
  },
  {
    "word": "values",
    "count": 115
  },
  {
    "word": "always",
    "count": 115
  },
  {
    "word": "using",
    "count": 114
  },
  {
    "word": "parameters",
    "count": 114
  },
  {
    "word": "code",
    "count": 113
  },
  {
    "word": "gem",
    "count": 113
  },
  {
    "word": "job_offers",
    "count": 112
  },
  {
    "word": "correct",
    "count": 111
  },
  {
    "word": "also",
    "count": 110
  },
  {
    "word": "get",
    "count": 109
  },
  {
    "word": "don't",
    "count": 107
  },
  {
    "word": "replace",
    "count": 105
  },
  {
    "word": "try",
    "count": 105
  },
  {
    "word": "csv",
    "count": 105
  },
  {
    "word": "methods",
    "count": 105
  },
  {
    "word": "config",
    "count": 102
  },
  {
    "word": "form",
    "count": 102
  },
  {
    "word": "travis",
    "count": 102
  },
  {
    "word": "request",
    "count": 101
  },
  {
    "word": "hash",
    "count": 101
  },
  {
    "word": "bump",
    "count": 101
  },
  {
    "word": "allow",
    "count": 100
  },
  {
    "word": "title",
    "count": 100
  },
  {
    "word": "deprecated",
    "count": 100
  },
  {
    "word": "service",
    "count": 99
  },
  {
    "word": "default",
    "count": 98
  },
  {
    "word": "recruiter",
    "count": 97
  },
  {
    "word": "value",
    "count": 97
  },
  {
    "word": "apienta",
    "count": 96
  },
  {
    "word": "information",
    "count": 96
  },
  {
    "word": "field",
    "count": 95
  },
  {
    "word": "create",
    "count": 93
  },
  {
    "word": "strong",
    "count": 93
  },
  {
    "word": "structure",
    "count": 92
  },
  {
    "word": "page",
    "count": 90
  },
  {
    "word": "categorization",
    "count": 90
  },
  {
    "word": "query",
    "count": 89
  },
  {
    "word": "sync",
    "count": 89
  },
  {
    "word": "slightly",
    "count": 89
  },
  {
    "word": "stop",
    "count": 89
  },
  {
    "word": "fetch",
    "count": 89
  },
  {
    "word": "call",
    "count": 88
  },
  {
    "word": "url",
    "count": 88
  },
  {
    "word": "schema",
    "count": 88
  },
  {
    "word": "missing",
    "count": 88
  },
  {
    "word": "source",
    "count": 87
  },
  {
    "word": "action",
    "count": 86
  },
  {
    "word": "changes",
    "count": 86
  },
  {
    "word": "db",
    "count": 86
  },
  {
    "word": "index",
    "count": 85
  },
  {
    "word": "wording",
    "count": 85
  },
  {
    "word": "prepare",
    "count": 85
  },
  {
    "word": "migration",
    "count": 85
  },
  {
    "word": "now",
    "count": 84
  },
  {
    "word": "context",
    "count": 84
  },
  {
    "word": "filter",
    "count": 83
  },
  {
    "word": "within",
    "count": 83
  },
  {
    "word": "message",
    "count": 83
  },
  {
    "word": "partial",
    "count": 83
  },
  {
    "word": "need",
    "count": 82
  },
  {
    "word": "error",
    "count": 82
  },
  {
    "word": "companies",
    "count": 82
  },
  {
    "word": "list",
    "count": 81
  },
  {
    "word": "case",
    "count": 81
  },
  {
    "word": "system",
    "count": 81
  },
  {
    "word": "dummy",
    "count": 80
  },
  {
    "word": "introduce",
    "count": 80
  },
  {
    "word": "location",
    "count": 80
  },
  {
    "word": "params",
    "count": 79
  },
  {
    "word": "locations",
    "count": 79
  },
  {
    "word": "module",
    "count": 78
  },
  {
    "word": "one",
    "count": 76
  },
  {
    "word": "table",
    "count": 76
  },
  {
    "word": "hr-xml",
    "count": 76
  },
  {
    "word": "string",
    "count": 76
  },
  {
    "word": "performance",
    "count": 76
  },
  {
    "word": "current",
    "count": 75
  },
  {
    "word": "templates",
    "count": 75
  },
  {
    "word": "attributes",
    "count": 75
  },
  {
    "word": "email",
    "count": 74
  },
  {
    "word": "creation",
    "count": 74
  },
  {
    "word": "revert",
    "count": 74
  },
  {
    "word": "better",
    "count": 73
  },
  {
    "word": "review",
    "count": 73
  },
  {
    "word": "pageviews",
    "count": 73
  },
  {
    "word": "process",
    "count": 73
  },
  {
    "word": "cronjob",
    "count": 73
  },
  {
    "word": "description",
    "count": 73
  },
  {
    "word": "button",
    "count": 73
  },
  {
    "word": "exportchampion",
    "count": 73
  },
  {
    "word": "increase",
    "count": 72
  },
  {
    "word": "port",
    "count": 72
  },
  {
    "word": "explicitly",
    "count": 71
  },
  {
    "word": "assembler",
    "count": 70
  },
  {
    "word": "input",
    "count": 70
  },
  {
    "word": "empty",
    "count": 69
  },
  {
    "word": "files",
    "count": 69
  },
  {
    "word": "put",
    "count": 69
  },
  {
    "word": "simplify",
    "count": 69
  },
  {
    "word": "updates",
    "count": 69
  },
  {
    "word": "custom",
    "count": 69
  },
  {
    "word": "columns",
    "count": 68
  },
  {
    "word": "unify",
    "count": 68
  },
  {
    "word": "js",
    "count": 68
  },
  {
    "word": "whitespace",
    "count": 68
  },
  {
    "word": "special",
    "count": 67
  },
  {
    "word": "support",
    "count": 67
  },
  {
    "word": "pass",
    "count": 67
  },
  {
    "word": "setup",
    "count": 67
  },
  {
    "word": "basic",
    "count": 66
  },
  {
    "word": "state",
    "count": 66
  },
  {
    "word": "behavior",
    "count": 65
  },
  {
    "word": "markup",
    "count": 65
  },
  {
    "word": "app",
    "count": 65
  },
  {
    "word": "routes",
    "count": 65
  },
  {
    "word": "care",
    "count": 65
  },
  {
    "word": "creating",
    "count": 65
  },
  {
    "word": "jobs",
    "count": 64
  },
  {
    "word": "object",
    "count": 64
  },
  {
    "word": "ruby",
    "count": 64
  },
  {
    "word": "mail",
    "count": 64
  },
  {
    "word": "handle",
    "count": 63
  },
  {
    "word": "examples",
    "count": 63
  },
  {
    "word": "initial",
    "count": 63
  },
  {
    "word": "hint",
    "count": 63
  },
  {
    "word": "minor",
    "count": 62
  },
  {
    "word": "interface",
    "count": 62
  },
  {
    "word": "admin",
    "count": 62
  },
  {
    "word": "public",
    "count": 62
  },
  {
    "word": "database",
    "count": 62
  },
  {
    "word": "start",
    "count": 61
  },
  {
    "word": "handling",
    "count": 61
  },
  {
    "word": "board",
    "count": 61
  },
  {
    "word": "date",
    "count": 61
  },
  {
    "word": "pageview",
    "count": 61
  },
  {
    "word": "json",
    "count": 60
  },
  {
    "word": "keep",
    "count": 60
  },
  {
    "word": "apply",
    "count": 60
  },
  {
    "word": "deprecation",
    "count": 60
  },
  {
    "word": "comment",
    "count": 60
  },
  {
    "word": "endpoints",
    "count": 60
  },
  {
    "word": "content",
    "count": 60
  },
  {
    "word": "concern",
    "count": 60
  },
  {
    "word": "selection",
    "count": 59
  },
  {
    "word": "key",
    "count": 59
  },
  {
    "word": "text",
    "count": 59
  },
  {
    "word": "useful",
    "count": 59
  },
  {
    "word": "layout",
    "count": 59
  },
  {
    "word": "output",
    "count": 58
  },
  {
    "word": "praktikum.info",
    "count": 58
  },
  {
    "word": "transform",
    "count": 58
  },
  {
    "word": "store",
    "count": 57
  },
  {
    "word": "real",
    "count": 57
  },
  {
    "word": "lookup",
    "count": 57
  },
  {
    "word": "necessary",
    "count": 57
  },
  {
    "word": "job_offer",
    "count": 57
  },
  {
    "word": "leave",
    "count": 57
  },
  {
    "word": "deliver",
    "count": 56
  },
  {
    "word": "explicit",
    "count": 56
  },
  {
    "word": "bundesagentur",
    "count": 56
  },
  {
    "word": "reflect",
    "count": 56
  },
  {
    "word": "enable",
    "count": 56
  },
  {
    "word": "tg",
    "count": 55
  },
  {
    "word": "mode",
    "count": 55
  },
  {
    "word": "profile",
    "count": 55
  },
  {
    "word": "additional",
    "count": 55
  },
  {
    "word": "tracking",
    "count": 55
  },
  {
    "word": "tasks",
    "count": 55
  },
  {
    "word": "platform",
    "count": 54
  },
  {
    "word": "path",
    "count": 54
  },
  {
    "word": "reference",
    "count": 54
  },
  {
    "word": "exclude",
    "count": 54
  },
  {
    "word": "extract",
    "count": 53
  }
];

series.dataFields.word = "tag";
series.dataFields.value = "count";

series.heatRules.push({
 "target": series.labels.template,
 "property": "fill",
 "min": am4core.color("#5CD5BE"),
 "max": am4core.color("#10bf9d"),
 "dataField": "value"
});

series.labels.template.tooltipText = "{value}";

var hoverState = series.labels.template.states.create("hover");
hoverState.properties.fill = am4core.color("#FF0000");

var title = chart.titles.create();
title.text = "Most Popular Commits Words";
title.fontSize = 20;
title.fontWeight = "800";
              
            
!
999px

Console