wordcloud2.js | Tag cloud/Wordle presentation on 2D canvas or HTML | Canvas library

This is supported from version @angular/cli@6.1.0-beta.2.

Update (November 2019):

The fileReplacements solution does not work with Angular CLI 8.0.0 anymore

Change angular.json to set your production index.html instead:

Try to change line 49 like this:

Use arrow function i.e. () => instead of the function keyword. A method with the function keyword has its own this context and hides the access to class properties/methods as opposed to arrow functions.

As described on the Mozilla Web Docs:

An arrow function expression has a shorter syntax than a function expression and does not have its own this, arguments, super, or new.target. These function expressions are best suited for non-method functions, and they cannot be used as constructors.

Change your code to following:

Add width="600" and height="300" to the element (or set it with JS before rendering the wordcloud – $canvas.attr('width', '600').attr('height', '300')).

It's not same as setting it in CSS only, details here: stackoverflow.com/a/43364730/3776299

Height percentages only work when all parent elements also have a defined height.

https://developer.mozilla.org/en-US/docs/Web/CSS/height

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto

In your case simply make html,body have defined height, for example:

Quite straight forward actually, please take a look at the sandbox I've setup to show the same - https://codesandbox.io/s/9435woonpy

1. Add wordcloud as a dependency to your project - npm i --save wordcloud

   In case you're wondering how I got the name of the package, just take a look into the project's package.json - https://github.com/timdream/wordcloud2.js/blob/gh-pages/package.json and look at the name attribute; this is the name with which the project is available in NPM and you confirm this by also looking at the author on the npm page

2. import 'wordcloud' into the file in which you're going to use it

3. Have an empty canvas ('my-canvas') into which you will load the wordcloud into
4. On componentDidMount, invoke the wordcloud api to render the wordcloud into the DOM