{"id":13701875,"url":"https://github.com/sgratzl/chartjs-chart-funnel","last_synced_at":"2025-10-26T01:45:05.182Z","repository":{"id":65332053,"uuid":"589629598","full_name":"sgratzl/chartjs-chart-funnel","owner":"sgratzl","description":"Chart.js Funnel chart","archived":false,"fork":false,"pushed_at":"2025-04-12T15:08:42.000Z","size":10249,"stargazers_count":26,"open_issues_count":8,"forks_count":15,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-10-04T06:57:45.278Z","etag":null,"topics":["chartjs","chartjs-plugin","funnel-chart","funnel-plots","javascript","typescript"],"latest_commit_sha":null,"homepage":"http://www.sgratzl.com/chartjs-chart-funnel/","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":"2023-01-16T15:11:42.000Z","updated_at":"2025-07-31T07:12:23.000Z","dependencies_parsed_at":"2024-03-02T02:34:03.113Z","dependency_job_id":"7282b221-6007-45df-a3cb-ad1da2387823","html_url":"https://github.com/sgratzl/chartjs-chart-funnel","commit_stats":{"total_commits":76,"total_committers":2,"mean_commits":38.0,"dds":"0.13157894736842102","last_synced_commit":"81940deba4cb74d395a5bd010020fba644b88d12"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"purl":"pkg:github/sgratzl/chartjs-chart-funnel","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sgratzl%2Fchartjs-chart-funnel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sgratzl%2Fchartjs-chart-funnel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sgratzl%2Fchartjs-chart-funnel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sgratzl%2Fchartjs-chart-funnel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sgratzl","download_url":"https://codeload.github.com/sgratzl/chartjs-chart-funnel/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sgratzl%2Fchartjs-chart-funnel/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281047802,"owners_count":26435124,"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","status":"online","status_checked_at":"2025-10-25T02:00:06.499Z","response_time":81,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","funnel-chart","funnel-plots","javascript","typescript"],"created_at":"2024-08-02T21:00:25.928Z","updated_at":"2025-10-26T01:45:05.167Z","avatar_url":"https://github.com/sgratzl.png","language":"TypeScript","readme":"# Chart.js Funnel\n\n[![License: MIT][mit-image]][mit-url] [![NPM Package][npm-image]][npm-url] [![Github Actions][github-actions-image]][github-actions-url]\n\nChart.js module for charting funnel plots. This plugin extends with a new char type `funnel`.\n\nA Funnel chart is a variant of a bar chart where the bar shrinks on one side to the size of the next bar. In addition, they are usually centered giving the visual impression of a funnel.\n\n![funnel chart](https://user-images.githubusercontent.com/4129778/212717664-b3c63b7f-022b-4a39-953c-9d6e45265f7c.png)\n\nWorks great with https://github.com/chartjs/chartjs-plugin-datalabels\n\n![funnel chart with labels](https://user-images.githubusercontent.com/4129778/212717832-5932802e-01d2-4da4-82eb-c4f9d3d1eebe.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-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 chart.js chartjs-chart-funnel\n```\n\n## Usage\n\nsee [Examples](https://www.sgratzl.com/chartjs-chart-funnel/examples/)\n\nand [![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/eYjEXQW)\n\n## Styling\n\nTrapezoid Elements are Bar elements and provide the same coloring options. In addition, see [TrapezoidElementOptions](https://github.com/sgratzl/chartjs-chart-funnel/blob/main/src/elements/TrapezoidElement.tjs#L11-L27) custom option with respect to shrinking behavior.\n\nIn addition, the FunnelController has the following options [FunnelController](https://github.com/sgratzl/chartjs-chart-funnel/blob/main/src/controllers/FunnelController.tjs#L24-L30) to customize the alignment of the chart.\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, CategoryScale } from 'chart.js';\nimport { FunnelController, TrapezoidElement } from 'chartjs-chart-funnel';\n\n// register controller in chart.js and ensure the defaults are set\nChart.register(FunnelController, TrapezoidElement, LinearScale, CategoryScale);\n\nconst chart = new Chart(document.getElementById('canvas').getContext('2d'), {\n  type: 'funnel',\n  data: {\n    labels: ['Step 1', 'Step 2', 'Step 3', 'Step 4'],\n    datasets: [\n      {\n        data: [0.7, 0.66, 0.61, 0.01],\n      },\n    ],\n  },\n});\n```\n\nVariant B:\n\n```js\nimport { FunnelChart } from 'chartjs-chart-funnel';\n\nconst chart = new FunnelChart(document.getElementById('canvas').getContext('2d'), {\n  data: {\n    //...\n  },\n});\n```\n\n## Development Environment\n\n```sh\nnpm i -g yarn\nyarn install\nyarn sdks vscode\n```\n\n### Building\n\n```sh\nyarn install\nyarn build\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-funnel.svg\n[npm-url]: https://npmjs.org/package/chartjs-chart-funnel\n[github-actions-image]: https://github.com/sgratzl/chartjs-chart-funnel/workflows/ci/badge.svg\n[github-actions-url]: https://github.com/sgratzl/chartjs-chart-funnel/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-funnel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsgratzl%2Fchartjs-chart-funnel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsgratzl%2Fchartjs-chart-funnel/lists"}