# chartjs-chart-wordcloud

> Chart.js module for word clouds

Latest version **4.4.5** (published 2025-10-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install chartjs-chart-wordcloud
pnpm add chartjs-chart-wordcloud
yarn add chartjs-chart-wordcloud
bun add chartjs-chart-wordcloud
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.4.5 |
| Published | 2025-10-04 |
| First published | 2020-07-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 242.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 128 |
| Author | Samuel Gratzl |
| Maintainers | sgratzl |
| Keywords | chart.js, word-cloud, tag-cloud |

## Links

- npm: https://www.npmjs.com/package/chartjs-chart-wordcloud
- Repository: https://github.com/sgratzl/chartjs-chart-wordcloud
- Issues: https://github.com/sgratzl/chartjs-chart-wordcloud/issues
- npm.io page: https://npm.io/package/chartjs-chart-wordcloud

## Dependencies (2)

- [d3-cloud](https://npm.io/package/d3-cloud.md) ^1.2.7
- [@types/d3-cloud](https://npm.io/package/@types/d3-cloud.md) ^1.2.9

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 4.4.5 (latest) — 2025-10-04
- 4.0.0-alpha (next) — 2022-11-07
- 4.4.4 — 2024-11-16
- 4.4.3 — 2024-10-20
- 4.4.2 — 2024-09-29
- 4.4.1 — 2024-06-08
- 4.4.0 — 2024-03-14
- 4.3.3 — 2024-01-21
- 4.3.2 — 2023-10-20
- 4.3.1 — 2023-10-09
- 4.3.0 — 2023-09-16
- 4.2.4 — 2023-09-16
- 4.2.3 — 2023-07-13
- 4.2.2 — 2023-07-08
- 4.2.1 — 2023-07-06
- … 24 more at https://npm.io/package/chartjs-chart-wordcloud/versions

## README

# Chart.js Word Clouds

[![NPM Package][npm-image]][npm-url] [![Github Actions][github-actions-image]][github-actions-url]

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

![word cloud example](https://user-images.githubusercontent.com/4129778/88903326-cbb55a80-d253-11ea-9fb3-ecca1e1ef67f.png)

## Related Plugins

Check out also my other chart.js plugins:

- [chartjs-chart-boxplot](https://github.com/sgratzl/chartjs-chart-boxplot) for rendering boxplots and violin plots
- [chartjs-chart-error-bars](https://github.com/sgratzl/chartjs-chart-error-bars) for rendering errors bars to bars and line charts
- [chartjs-chart-geo](https://github.com/sgratzl/chartjs-chart-geo) for rendering map, bubble maps, and choropleth charts
- [chartjs-chart-graph](https://github.com/sgratzl/chartjs-chart-graph) for rendering graphs, trees, and networks
- [chartjs-chart-pcp](https://github.com/sgratzl/chartjs-chart-pcp) for rendering parallel coordinate plots
- [chartjs-chart-venn](https://github.com/sgratzl/chartjs-chart-venn) for rendering venn and euler diagrams
- [chartjs-plugin-hierarchical](https://github.com/sgratzl/chartjs-plugin-hierarchical) for rendering hierarchical categorical axes which can be expanded and collapsed

## Install

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

## Usage

see [Examples](https://www.sgratzl.com/chartjs-chart-wordcloud/examples/)

or at this [![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/WNwzYgy)

## Word Cloud

### Data Structure

```ts
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:

https://github.com/sgratzl/chartjs-chart-wordcloud/blob/14ac8327c2209c0d8f89fdd6cd86d2b2d7daedce/src/controllers/WordCloudController.ts#L184-L193

Word element options:

https://github.com/sgratzl/chartjs-chart-wordcloud/blob/14ac8327c2209c0d8f89fdd6cd86d2b2d7daedce/src/elements/WordElement.ts#L3-L29

## 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:

```js
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:

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

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

## Development Environment

```sh
npm i -g yarn
yarn install
yarn sdks vscode
```

### Common commands

```sh
yarn compile
yarn test
yarn lint
yarn fix
yarn build
yarn docs
```

[mit-image]: https://img.shields.io/badge/License-MIT-yellow.svg
[mit-url]: https://opensource.org/licenses/MIT
[npm-image]: https://badge.fury.io/js/chartjs-chart-wordcloud.svg
[npm-url]: https://npmjs.org/package/chartjs-chart-wordcloud
[github-actions-image]: https://github.com/sgratzl/chartjs-chart-wordcloud/workflows/ci/badge.svg
[github-actions-url]: https://github.com/sgratzl/chartjs-chart-wordcloud/actions
[codepen]: https://img.shields.io/badge/CodePen-open-blue?logo=codepen

---
_Source: https://npm.io/package/chartjs-chart-wordcloud · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._