{"id":13701918,"url":"https://github.com/sgratzl/chartjs-chart-wordcloud","last_synced_at":"2025-05-16T13:08:41.181Z","repository":{"id":38039674,"uuid":"283720795","full_name":"sgratzl/chartjs-chart-wordcloud","owner":"sgratzl","description":"Chart.js Word Clouds","archived":false,"fork":false,"pushed_at":"2025-02-09T01:55:21.000Z","size":16573,"stargazers_count":120,"open_issues_count":9,"forks_count":21,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-12T10:58:07.754Z","etag":null,"topics":["chartjs","chartjs-plugin","d3-cloud","javascript","tag-cloud","word-cloud","wordcloud"],"latest_commit_sha":null,"homepage":"https://www.sgratzl.com/chartjs-chart-wordcloud/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sgratzl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["sgratzl"]}},"created_at":"2020-07-30T08:58:16.000Z","updated_at":"2025-03-25T22:56:56.000Z","dependencies_parsed_at":"2024-03-02T02:37:48.958Z","dependency_job_id":"bc968efe-e7cb-44fd-8067-2c2cc8135bde","html_url":"https://github.com/sgratzl/chartjs-chart-wordcloud","commit_stats":{"total_commits":103,"total_committers":3,"mean_commits":"34.333333333333336","dds":"0.11650485436893199","last_synced_commit":"52920191fd43cf963d6aa896b1c7d1105d8e0d88"},"previous_names":[],"tags_count":37,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sgratzl%2Fchartjs-chart-wordcloud","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sgratzl%2Fchartjs-chart-wordcloud/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sgratzl%2Fchartjs-chart-wordcloud/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sgratzl%2Fchartjs-chart-wordcloud/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sgratzl","download_url":"https://codeload.github.com/sgratzl/chartjs-chart-wordcloud/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254535828,"owners_count":22087399,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chartjs","chartjs-plugin","d3-cloud","javascript","tag-cloud","word-cloud","wordcloud"],"created_at":"2024-08-02T21:00:27.445Z","updated_at":"2025-05-16T13:08:41.162Z","avatar_url":"https://github.com/sgratzl.png","language":"TypeScript","readme":"# Chart.js Word Clouds\n\n[![NPM Package][npm-image]][npm-url] [![Github Actions][github-actions-image]][github-actions-url]\n\nChart.js module for charting word or tag clouds. Adding new chart type: `wordCloud`.\n\n![word cloud example](https://user-images.githubusercontent.com/4129778/88903326-cbb55a80-d253-11ea-9fb3-ecca1e1ef67f.png)\n\n## Related Plugins\n\nCheck out also my other chart.js plugins:\n\n- [chartjs-chart-boxplot](https://github.com/sgratzl/chartjs-chart-boxplot) for rendering boxplots and violin plots\n- [chartjs-chart-error-bars](https://github.com/sgratzl/chartjs-chart-error-bars) for rendering errors bars to bars and line charts\n- [chartjs-chart-geo](https://github.com/sgratzl/chartjs-chart-geo) for rendering map, bubble maps, and choropleth charts\n- [chartjs-chart-graph](https://github.com/sgratzl/chartjs-chart-graph) for rendering graphs, trees, and networks\n- [chartjs-chart-pcp](https://github.com/sgratzl/chartjs-chart-pcp) for rendering parallel coordinate plots\n- [chartjs-chart-venn](https://github.com/sgratzl/chartjs-chart-venn) for rendering venn and euler diagrams\n- [chartjs-plugin-hierarchical](https://github.com/sgratzl/chartjs-plugin-hierarchical) for rendering hierarchical categorical axes which can be expanded and collapsed\n\n## Install\n\n```bash\nnpm install --save chart.js chartjs-chart-wordcloud\n```\n\n## Usage\n\nsee [Examples](https://www.sgratzl.com/chartjs-chart-wordcloud/examples/)\n\nor at this [![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/WNwzYgy)\n\n## Word Cloud\n\n### Data Structure\n\n```ts\nconst config = {\n  type: 'wordCloud',\n  data: {\n    // text\n    labels: ['Hello', 'world', 'normally', 'you', 'want', 'more', 'words', 'than', 'this'],\n    datasets: [\n      {\n        label: 'DS',\n        // size in pixel\n        data: [90, 80, 70, 60, 50, 40, 30, 20, 10],\n      },\n    ],\n  },\n  options: {},\n};\n```\n\n### Styling of elements\n\nA word has the basic FontSpec styling options (family, color, ...). In addition it has several options regarding rotating the text.\n\nController options:\n\nhttps://github.com/sgratzl/chartjs-chart-wordcloud/blob/14ac8327c2209c0d8f89fdd6cd86d2b2d7daedce/src/controllers/WordCloudController.ts#L184-L193\n\nWord element options:\n\nhttps://github.com/sgratzl/chartjs-chart-wordcloud/blob/14ac8327c2209c0d8f89fdd6cd86d2b2d7daedce/src/elements/WordElement.ts#L3-L29\n\n## ESM and Tree Shaking\n\nThe 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.\n\nVariant A:\n\n```js\nimport { Chart } from 'chart.js';\nimport { WordCloudController, WordElement } from 'chartjs-chart-wordcloud';\n\nChart.register(WordCloudController, WordElement);\n...\n\nnew Chart(ctx, {\n  type: WordCloudController.id,\n  data: [...],\n});\n```\n\nVariant B:\n\n```js\nimport { WordCloudChart } from 'chartjs-chart-wordcloud';\n\nnew WordCloudChart(ctx, {\n  data: [...],\n});\n```\n\n## Development Environment\n\n```sh\nnpm i -g yarn\nyarn install\nyarn sdks vscode\n```\n\n### Common commands\n\n```sh\nyarn compile\nyarn test\nyarn lint\nyarn fix\nyarn build\nyarn docs\n```\n\n[mit-image]: https://img.shields.io/badge/License-MIT-yellow.svg\n[mit-url]: https://opensource.org/licenses/MIT\n[npm-image]: https://badge.fury.io/js/chartjs-chart-wordcloud.svg\n[npm-url]: https://npmjs.org/package/chartjs-chart-wordcloud\n[github-actions-image]: https://github.com/sgratzl/chartjs-chart-wordcloud/workflows/ci/badge.svg\n[github-actions-url]: https://github.com/sgratzl/chartjs-chart-wordcloud/actions\n[codepen]: https://img.shields.io/badge/CodePen-open-blue?logo=codepen\n","funding_links":["https://github.com/sponsors/sgratzl"],"categories":["Charts"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsgratzl%2Fchartjs-chart-wordcloud","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsgratzl%2Fchartjs-chart-wordcloud","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsgratzl%2Fchartjs-chart-wordcloud/lists"}