Chart.js Word Clouds

Chart.js module for charting word or tag clouds. Adding new chart type: wordCloud.

Related Plugins

Check out also my other chart.js plugins:

• chartjs-chart-boxplot for rendering boxplots and violin plots
• chartjs-chart-error-bars for rendering errors bars to bars and line charts
• chartjs-chart-geo for rendering map, bubble maps, and choropleth charts
• chartjs-chart-graph for rendering graphs, trees, and networks
• chartjs-chart-pcp for rendering parallel coordinate plots
• chartjs-chart-venn for rendering venn and euler diagrams
• chartjs-plugin-hierarchical for rendering hierarchical categorical axes which can be expanded and collapsed

Install

npm install --save chart.js chartjs-chart-wordcloud

Usage

see Examples

or at this

Word Cloud

Data Structure

const config = {
  type: 'wordCloud',
  data: {
    // text
    labels: ['Hello', 'world', 'normally', 'you', 'want', 'more', 'words', 'than', 'this'],
    datasets: [
      {
        label: 'DS',
        // size in pixel
        data: [90, 80, 70, 60, 50, 40, 30, 20, 10],
      },
    ],
  },
  options: {},
};

Styling of elements

A word has the basic FontSpec styling options (family, color, ...). In addition it has several options regarding rotating the text.

Controller options:

chartjs-chart-wordcloud/src/controllers/WordCloudController.ts

Lines 184 to 193 in 14ac832

	export interface IWordCloudControllerDatasetOptions
	extends IControllerDatasetOptions,
	ScriptableAndArrayOptions<IWordElementOptions>,
	ScriptableAndArrayOptions<ICommonHoverOptions> {
	/**
	* whether to fit the word cloud to the map, by scaling to the actual bounds
	* @default true
	*/
	fit: boolean;
	}

Word element options:

chartjs-chart-wordcloud/src/elements/WordElement.ts

Lines 3 to 29 in 14ac832

	export interface IWordElementOptions extends IFontSpec {
	/**
	* rotation of the word
	* @default undefined then it will be randomly derived given the other constraints
	*/
	rotate: number;
	/**
	* number of rotation steps between min and max rotation
	* @default 2
	*/
	rotationSteps: number;
	/**
	* angle in degree for the min rotation
	* @default -90
	*/
	minRotation: number;
	/**
	* angle in degree for the max rotation
	* @default 0
	*/
	maxRotation: number;
	/**
	* padding around each word while doing the layout
	* @default 1
	*/
	padding: number;
	}

ESM and Tree Shaking

The ESM build of the library supports tree shaking thus having no side effects. As a consequence the chart.js library won't be automatically manipulated nor new controllers automatically registered. One has to manually import and register them.

Variant A:

import { Chart } from 'chart.js';
import { WordCloudController, WordElement } from 'chartjs-chart-wordcloud';

Chart.register(WordCloudController, WordElement);
...

new Chart(ctx, {
  type: WordCloudController.id,
  data: [...],
});

Variant B:

import { WordCloudChart } from 'chartjs-chart-wordcloud';

new WordCloudChart(ctx, {
  data: [...],
});

Development Environment

npm i -g yarn
yarn install
yarn sdks vscode

Common commands

yarn compile
yarn test
yarn lint
yarn fix
yarn build
yarn docs