{"id":13701913,"url":"https://github.com/upsetjs/chartjs-chart-venn","last_synced_at":"2025-04-04T18:04:25.454Z","repository":{"id":38039664,"uuid":"270787764","full_name":"upsetjs/chartjs-chart-venn","owner":"upsetjs","description":"Chart.js Venn and Euler Diagrams","archived":false,"fork":false,"pushed_at":"2025-02-09T01:55:01.000Z","size":18102,"stargazers_count":67,"open_issues_count":8,"forks_count":13,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-03-28T17:02:18.516Z","etag":null,"topics":["chartjs","chartjs-plugin","euler","euler-diagram","set-theory","venn-diagram","venndiagram"],"latest_commit_sha":null,"homepage":"http://upset.js.org/chartjs-chart-venn/","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/upsetjs.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},"funding":{"github":["sgratzl"]}},"created_at":"2020-06-08T18:53:21.000Z","updated_at":"2025-02-22T00:13:39.000Z","dependencies_parsed_at":"2024-06-08T22:37:52.016Z","dependency_job_id":"b4aca695-9466-44f5-ab42-b0bef98f080b","html_url":"https://github.com/upsetjs/chartjs-chart-venn","commit_stats":{"total_commits":145,"total_committers":3,"mean_commits":"48.333333333333336","dds":0.07586206896551728,"last_synced_commit":"368717a008361ca21a7643df5e239a834d378abd"},"previous_names":[],"tags_count":40,"template":false,"template_full_name":"sgratzl/ts-library-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/upsetjs%2Fchartjs-chart-venn","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/upsetjs%2Fchartjs-chart-venn/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/upsetjs%2Fchartjs-chart-venn/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/upsetjs%2Fchartjs-chart-venn/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/upsetjs","download_url":"https://codeload.github.com/upsetjs/chartjs-chart-venn/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247226212,"owners_count":20904465,"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","euler","euler-diagram","set-theory","venn-diagram","venndiagram"],"created_at":"2024-08-02T21:00:27.326Z","updated_at":"2025-04-04T18:04:25.432Z","avatar_url":"https://github.com/upsetjs.png","language":"TypeScript","funding_links":["https://github.com/sponsors/sgratzl"],"categories":["Charts"],"sub_categories":[],"readme":"# Chart.js Venn and Euler Diagram Chart\n\n[![NPM Package][npm-image]][npm-url] [![Github Actions][github-actions-image]][github-actions-url]\n\nChart.js module for charting venn diagrams with up to five sets. Adding new chart type: `venn` and `euler`.\n\n![Sports Venn Diagram](https://user-images.githubusercontent.com/4129778/84571515-f32f9100-ad93-11ea-9354-039411eef43a.png)\n\n![five sets](https://user-images.githubusercontent.com/4129778/86374498-eca28400-bc84-11ea-8494-ea7d9cd11781.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-wordcloud](https://github.com/sgratzl/chartjs-chart-wordcloud) for rendering word clouds\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-venn\n```\n\n## Usage\n\nsee [Examples](https://upset.js.org/chartjs-chart-venn/examples/)\n\nor at this [![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/ExPyZjG)\n\n## Venn Diagram\n\n### Data Structure\n\n```ts\nconst config = {\n  type: 'venn',\n  data: ChartVenn.extractSets(\n    [\n      { label: 'Soccer', values: ['alex', 'casey', 'drew', 'hunter'] },\n      { label: 'Tennis', values: ['casey', 'drew', 'jade'] },\n      { label: 'Volleyball', values: ['drew', 'glen', 'jade'] },\n    ],\n    {\n      label: 'Sports',\n    }\n  ),\n  options: {},\n};\n```\n\nAlternative data structure\n\n```ts\nconst config = {\n  type: 'venn',\n  data: {\n    labels: [\n      'Soccer',\n      'Tennis',\n      'Volleyball',\n      'Soccer ∩ Tennis',\n      'Soccer ∩ Volleyball',\n      'Tennis ∩ Volleyball',\n      'Soccer ∩ Tennis ∩ Volleyball',\n    ],\n    datasets: [\n      {\n        label: 'Sports',\n        data: [\n          { sets: ['Soccer'], value: 2 },\n          { sets: ['Tennis'], value: 0 },\n          { sets: ['Volleyball'], value: 1 },\n          { sets: ['Soccer', 'Tennis'], value: 1 },\n          { sets: ['Soccer', 'Volleyball'], value: 0 },\n          { sets: ['Tennis', 'Volleyball'], value: 1 },\n          { sets: ['Soccer', 'Tennis', 'Volleyball'], value: 1 },\n        ],\n      },\n    ],\n  },\n  options: {},\n};\n```\n\n### Styling of elements\n\n`ArcSlice` elements have the basic `backgroundColor`, `borderColor`, and `borderWidth` properties similar to a regular rectangle.\n\n### Styling of labels\n\nThe `x` scale _ticks_ options are used to configure the _set value_ labels within the intersections.\nThe `y` scale _ticks_ options are used to configure the _set label_ labels next ot the set circles.\nChanging the tick display options (e.g. `scales.x.ticks.display = false`) will disable the set value labels.\nSimilarly, its font spec and color are used to the styling of the labels.\n\n## Euler Diagram\n\nEuler diagrams are relaxed proportional venn diagrams such that the area of the circles and overlap try to fit the overlapping value.\nIt is a relaxed in a way that is just approximates the proportions using a numerical optimization process.\nMoreover, only one and two set overlaps are used for the computation.\nThe library uses [venn.js](https://github.com/upsetjs/venn.js) in the background.\n\n### Data Structure\n\n```ts\nconst config = {\n  type: 'euler',\n  data: ChartVenn.extractSets(\n    [\n      { label: 'A', values: [1, 2, 3, 4, 11, 12, 13, 14, 15, 16, 17, 18] },\n      { label: 'B', values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 19, 20, 21, 22, 23] },\n      { label: 'C', values: [1, 11, 12, 4, 5, 24, 25, 26, 27, 28, 29, 30] },\n    ],\n    {\n      label: 'Sets',\n    }\n  ),\n  options: {},\n};\n```\n\n### Styling of elements\n\nsee Venn Diagram\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, LinearScale } from 'chart.js';\nimport { VennDiagramController, ArcSlice } from 'chartjs-chart-venn';\n\nChart.register(VennDiagramController, ArcSlice, LinearScale);\n...\n\nnew Chart(ctx, {\n  type: VennDiagramController.id,\n  data: [...],\n});\n```\n\nVariant B:\n\n```js\nimport { VennDiagramChart } from 'chartjs-chart-venn';\n\nnew VennDiagramChart(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-venn.svg\n[npm-url]: https://npmjs.org/package/chartjs-chart-venn\n[github-actions-image]: https://github.com/upsetjs/chartjs-chart-venn/workflows/ci/badge.svg\n[github-actions-url]: https://github.com/upsetjs/chartjs-chart-venn/actions\n[codepen]: https://img.shields.io/badge/CodePen-open-blue?logo=codepen\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fupsetjs%2Fchartjs-chart-venn","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fupsetjs%2Fchartjs-chart-venn","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fupsetjs%2Fchartjs-chart-venn/lists"}