Skip to content

sgratzl/chartjs-chart-wordcloud

Repository files navigation

Chart.js Word Clouds

NPM Package Github Actions

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

word cloud example

Related Plugins

Check out also my other chart.js plugins:

Install

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

Usage

see Examples

or at this Open in CodePen

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:

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:

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