angular7-word-cloud

Installation

To install this library, run:

$ npm install angular7-word-cloud --save
$ npm install d3 --save

API

Import

// In your App's module:
imports: [
   AgWordCloudModule.forRoot()
]

Then add add the script to .angular-cli.json

"scripts": [
      ***
        "../node_modules/angular7-word-cloud/d3.min.js"
      ]

How to use

There are one directive for word cloud: ag-word-cloud, to use it just add this block on your html file:

<div AgWordCloud 
	#word_cloud_chart=ag-word-cloud 
	[wordData]="word_cloud"
	 [options]="options">
	</div>

// Create Work Cloud Data Array
wordData: Array<AgWordCloudData> = [// Words];
// Word Cloud Options
options = {
	settings: {
		minFontSize: 10,
		maxFontSize: 100,
	},
	margin: {
		top: 10,
		right: 10,
		bottom: 10,
		left: 10
	},
	labels: true // false to hide hover labels
};

Properties

• wordData (Array<WordCloudData> | WordCloudData[]) - set of words, it should be Array<WordCloudData> and each object must have a text and size;

• colors (?Array<string> | string[]) - data colors, will use default and|or random colors if not specified.

• options (?WordCloudOptions) - word cloud options and there are two object you can pass it settings and margin.

  • setting containes minFontSize and maxFontSize for word sets.
  • margin of canves top, left, bottom, right, Default values is 10.
  • labels show Size label at the bottom

• width and height of canvas, the Default value for width is the width of the container, and the height equals the width * 0.75.

Troubleshooting

Please follow this guidelines when reporting bugs and feature requests:

• Use GitHub Issues board to report bugs and feature requests (not our email address)
• Please always write steps to reproduce the error. That way we can focus on fixing the bug, not scratching our heads trying to reproduce it.

Thanks for understanding!

License

MIT © [Raghvendra]