{"id":14008508,"url":"https://github.com/greghub/funnel-graph-js","last_synced_at":"2026-01-27T10:13:34.180Z","repository":{"id":34212781,"uuid":"169395688","full_name":"greghub/funnel-graph-js","owner":"greghub","description":"SVG Funnel Graph Javascript Library","archived":false,"fork":false,"pushed_at":"2024-06-24T11:30:37.000Z","size":1177,"stargazers_count":314,"open_issues_count":26,"forks_count":78,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-09-11T01:35:47.331Z","etag":null,"topics":["chart-library","charting-library","funnel-chart","funnel-graph","funnel-plots","graph-library","svg-chart","svg-graph"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/greghub.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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}},"created_at":"2019-02-06T11:27:29.000Z","updated_at":"2025-08-27T21:33:41.000Z","dependencies_parsed_at":"2024-05-01T23:54:42.488Z","dependency_job_id":"73fd1ab3-6bed-4502-b415-61569e697d2e","html_url":"https://github.com/greghub/funnel-graph-js","commit_stats":{"total_commits":93,"total_committers":5,"mean_commits":18.6,"dds":0.06451612903225812,"last_synced_commit":"d8537ef1f26850d8db157fe972af3c04f3a3c9d1"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/greghub/funnel-graph-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greghub%2Ffunnel-graph-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greghub%2Ffunnel-graph-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greghub%2Ffunnel-graph-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greghub%2Ffunnel-graph-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/greghub","download_url":"https://codeload.github.com/greghub/funnel-graph-js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greghub%2Ffunnel-graph-js/sbom","scorecard":{"id":444895,"data":{"date":"2025-08-11","repo":{"name":"github.com/greghub/funnel-graph-js","commit":"d8537ef1f26850d8db157fe972af3c04f3a3c9d1"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.7,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Code-Review","score":0,"reason":"Found 2/24 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 8 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"115 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-6chw-6frg-f759","Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25","Warn: Project is vulnerable to: GHSA-4w2v-q235-vp99","Warn: Project is vulnerable to: GHSA-cph5-m8f7-6c5x","Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx","Warn: Project is vulnerable to: GHSA-jr5f-v2jv-69x6","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx","Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-wg6g-ppvx-927h","Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-897m-rjf5-jp39","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-r7jx-5m6m-cpg9","Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2","Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-j4f2-536g-r55m","Warn: Project is vulnerable to: GHSA-r7qp-cfhv-p84w","Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h","Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q","Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c","Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc","Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-4q6p-r6v2-jvc5","Warn: Project is vulnerable to: GHSA-q42p-pg8m-cqh6","Warn: Project is vulnerable to: GHSA-w457-6q6x-cgp9","Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f","Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p","Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv","Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8","Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65","Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh","Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44","Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-6x33-pw7p-hmpq","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr","Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-282f-qqgm-c34q","Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-r8f7-9pfq-mjmv","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-cwx2-736x-mf6w","Warn: Project is vulnerable to: GHSA-v39p-96qg-c8rf","Warn: Project is vulnerable to: GHSA-8v63-cqqc-6r2c","Warn: Project is vulnerable to: GHSA-6fx8-h7jm-663j","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-g6ww-v8xp-vmwg","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-7mwh-4pqv-wmr8","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7","Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6","Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj","Warn: Project is vulnerable to: GHSA-fxwf-4rqh-v8g3","Warn: Project is vulnerable to: GHSA-25hc-qcg6-38wj","Warn: Project is vulnerable to: GHSA-xfhh-g9f5-x4m4","Warn: Project is vulnerable to: GHSA-qm95-pgcg-qqfq","Warn: Project is vulnerable to: GHSA-cqmj-92xf-r6r9","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw","Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc","Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v","Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v","Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx","Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p","Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693","Warn: Project is vulnerable to: GHSA-72mh-269x-7mh5","Warn: Project is vulnerable to: GHSA-h4j5-c7cj-74xg","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh","Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-19T06:28:05.124Z","repository_id":34212781,"created_at":"2025-08-19T06:28:05.124Z","updated_at":"2025-08-19T06:28:05.124Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28811553,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-27T07:41:26.337Z","status":"ssl_error","status_checked_at":"2026-01-27T07:41:08.776Z","response_time":168,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["chart-library","charting-library","funnel-chart","funnel-graph","funnel-plots","graph-library","svg-chart","svg-graph"],"created_at":"2024-08-10T11:01:45.228Z","updated_at":"2026-01-27T10:13:34.162Z","avatar_url":"https://github.com/greghub.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# FunnelGraph.js \n\n![npm](https://img.shields.io/npm/v/funnel-graph-js.svg)\n[![Build Status](https://travis-ci.org/greghub/funnel-graph-js.svg?branch=master)](https://travis-ci.org/greghub/funnel-graph-js)\n[![Scrutinizer Code Quality](https://scrutinizer-ci.com/g/greghub/funnel-graph-js/badges/quality-score.png?b=master)](https://scrutinizer-ci.com/g/greghub/funnel-graph-js/?branch=master)\n![GitHub file size in bytes](https://img.shields.io/github/size/greghub/funnel-graph-js/dist/js/funnel-graph.min.js.svg)\n![GitHub](https://img.shields.io/github/license/greghub/funnel-graph-js.svg)\n![GitHub last commit](https://img.shields.io/github/last-commit/greghub/funnel-graph-js.svg)\n[![Gitter](https://img.shields.io/gitter/room/greghub/funnel-graph-js.svg)](https://gitter.im/funnel-graph-js/community)\n\nFunnel Graph JS is a library for generating a funnel chart. It generates an SVG chart, adds labels, legend and other info.\nSome of the features include generating horizontal and vertical funnel charts, applying solid colors and gradients,\npossibility to generate a two-dimensional funnel chart. \n\n\u003cimg width=\"640\" src=\"https://i.imgur.com/3Zw9m2l.jpg\" alt=\"SVG Two Dimensional Funnel Graph\"\u003e\n\nFunnelGraph.js is also available as a Vue.js component: [Vue Funnel Graph](https://github.com/greghub/vue-funnel-graph-js)\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Options](#options)\n- [Methods](#methods)\n\n## Installation\n\nYou can get the code by installing the NPM package, loading files from a CDN or downloading the repo. \n\n#### NPM\n\nRun the following script to install:\n```\nnpm i funnel-graph-js\n```\n\n#### CDN\n\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://unpkg.com/funnel-graph-js@1.3.9/dist/css/main.min.css\"\u003e\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://unpkg.com/funnel-graph-js@1.3.9/dist/css/theme.min.css\"\u003e\n\n\u003cscript src=\"https://unpkg.com/funnel-graph-js@1.3.9/dist/js/funnel-graph.min.js\"\u003e\u003c/script\u003e\n```\n\n#### Download\n\nDownload the repo ZIP, add `funnel-graph.js` or `funnel-graph.min.js`, and `main.css` or `main.min.css`.\nOptionally add `theme.min.css` to include the styling for labels, legend etc. \nIt is recommended to add the theme, to display the chart correctly.\n\nFunnelGraph.js is built in a way that most of the styling is controlled by theme file,\nso it is possible to adapt every element to your design. The chart is a SVG element and \n`colors` property of the options controls the colors of the chart.\n\nCSS:\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"../dist/css/main.min.css\"\u003e\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"../dist/css/theme.min.css\"\u003e\n```\n\nJS:\n```html\n\u003cscript src=\"../dist/js/funnel-graph.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\n```js\nvar graph = new FunnelGraph({\n    container: '.funnel',\n    gradientDirection: 'horizontal',\n    data: {...},\n    displayPercent: true,\n    direction: 'horizontal'\n});\n\ngraph.draw();\n```\n\nYou can choose how you want to display your data on funnel graph. \nYou can display exact numbers, you can display percentages or both.\nThe library will generate percentages automatically,\ntaking the largest number as 100% and then calculating \nother numbers as a fraction of the largest number.\nFor example: 12000, 5700 and 360 will be displayed as 47.5% and 3% \n(100% is skipped in order to avoid redundancy).\n\nProvided values | 12000 | 5700  | 360 |\n|---------------|-------|-------|-----|\nDisplay values | 12,000 | 5,700  | 360 |\nCalculated percentages |       | 47.5% | 3%  |\n\nIf you want to hide percentages you set `displayPercent` to `false`:\n\n```js\n{\n    displayPercent: false\n}\n```\n\nYou can also display a vertical funnel graph: \n```js\n{\n    direction: 'vertical'\n}\n```\n\nIf you want to add a solid color to your funnel:\n```js\n{\n    color: '#FF5500'\n}\n```\n\nAnd if you want a gradient:\n```js\n{\n    color: ['orange', 'red']\n}\n```\nAn array containing only one color will have the same effect\nas passing a single color as a string.\n\nIf you are using a gradient you can control the gradient direction using:\n\n```js\n{\n    gradientDirection: 'vertical' // defaults to 'horizontal'\n}\n```\n\nThere are 3 ways to define data for the funnel graph.\n\nThe most simple way is do define a data array:\n\n```js\ndata: [12000, 5700, 360]\n```\n\nthis will create the data without any titles. However you can still display the values as percentages, as number or both.\n\nIf you want to add labels to your numbers pass an array of labels to `data`.\n\n```js\ndata: {\n    labels: ['Impressions', 'Add To Cart', 'Buy'],\n    colors: ['orange', 'red'],\n    values: [12000, 5700, 360]\n},\n```\n\nThat most explicit way to add data to the funnel graph.\n\n\n\u003cimg width=\"640\" src=\"https://i.imgur.com/c2qbxGQ.jpg\" alt=\"SVG Funnel Graph\"\u003e\n\nIf using one of those two ways, you can control the graph \ncolor using `colors` param. Otherwise, the default color will be used. \nAnd if you are using gradient as color, then you can control\ngradient direction with `gradientDirection` param. \n`colors` shall be passed inside `data`, while `gradientDirection` with other options.\n\n```js\ndata: {\n    gradientDirection: 'horizontal'\n}\n```\n\nOtherwise it defaults to horizontal (left to right).\n\n## Two-dimensional funnel graph\n\nIf you want to break down your data into more details,\nyou can use two-dimensional svg funnel graph. It will\ngenerate a graph like this: \n\n\u003cimg width=\"640\" src=\"https://i.imgur.com/3Zw9m2l.jpg\" alt=\"SVG Two Dimensional Funnel Graph\"\u003e\n\n\nIn this example we will add more details to the previous example.\nWe have Impressions, Add To Cart and Buy data, however this time\nwe also want to visualize the data sources. So we want to see\nthe traffic sources, how much of them are direct, from ads\nand from social media.\n\n```js\ndata: {\n    labels: ['Impressions', 'Add To Cart', 'Buy'],\n    subLabels: ['Direct', 'Social Media', 'Ads'],\n    colors: [\n        ['#FFB178', '#FF78B1', '#FF3C8E'],\n        'red',\n        ['blue']\n    ],\n    values: [\n        [2000, 4000, 6000],\n        [3000, 1000, 1700],\n        [200, 30, 130]\n    ]\n}\n```\n\nIn a two-dimensional graph each segment shall have it's own color or gradient.\nIf using a gradient the `gradientDirection` option will be applied to all of the segments.\nHowever all supported ways of defining colors in a simple funnel graph can be used here as\nwell and you can have both solid colors and gradients applied to segments of a single graph.\nIn the above example first segment, \"Direct\", will have a gradient, \n\"Social Media\" will have a solid red color, and \"Ads\" segment will have a solid blue.   \n\n## Options\n\n| Option | Description | Type | Required | Options | Default | Example |\n|--------|-------------|------|----------|---------|---------|---------|\n| `container` | Selector of the element that will hold the chart | `string` | Yes | | | '.funnel-container' |\n| `direction` | Whether the chart visualization is displayed vertically or horizontally | `string` | No | 'vertical', 'horizontal' | 'horizontal' | |\n| `gradientDirection` | Whether the gradient applied to the segments of the graph is displayed from top to bottom or from left to right | `string` | No | 'vertical', 'horizontal' | 'horizontal' |\n| `displayPercent` | Whether to display the automatically calculated percentage values below the labels | `boolean` | No | `true`, `false` | `true` | |\n| `data` | Object containing information about values, labels and colors of the chart | `object` | Yes | | | |\n| `width` | Width of the funnel graph | `number` | No | | Container width | 800 |\n| `height` | Height of the funnel graph | `number` | No | | Container height | 300 |\n| `subLabelValue` | Whether display percentage or real value of segment | `string` | No | `percent`, `raw` | `percent` | \n\n## Methods\n\n| Method | Description | Example |\n|--------|-------------|---------|\n| `makeVertical()` | Display chart vertically | |\n| `makeHorizontal()` | Display chart horizontally | |\n| `toggleDirection()` | Toggle direction of chart | |\n| `gradientMakeVertical()` | Display gradient on all sections from top to bottom | |\n| `gradientMakeHorizontal()` | Display gradient on all sections from left to right | |\n| `gradientToggleDirection()` | Toggle direction of gradient on all sections | |\n| `updateHeight()` | Update funnel graph height | |\n| `updateWidth()` | Update funnel graph width | |\n| `updateData({data})` | Update funnel graph data | ```labels: ['Stage 1', 'Stage 2', 'Stage 3']``` |\n| `update({options})` | Update funnel options | ```gradientDirection: 'horizontal', data: {...}, displayPercent: true, direction: 'horizontal', height: 300, width: 500``` |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgreghub%2Ffunnel-graph-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgreghub%2Ffunnel-graph-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgreghub%2Ffunnel-graph-js/lists"}