Awesome
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:
Word element options:
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