{"id":13401762,"url":"https://github.com/kurkle/chartjs-chart-sankey","last_synced_at":"2025-05-16T10:06:25.001Z","repository":{"id":42496742,"uuid":"263141409","full_name":"kurkle/chartjs-chart-sankey","owner":"kurkle","description":"Chart.js module for creating sankey diagrams","archived":false,"fork":false,"pushed_at":"2025-05-12T23:58:48.000Z","size":17427,"stargazers_count":163,"open_issues_count":17,"forks_count":34,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-14T08:49:28.249Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/kurkle.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2020-05-11T19:42:22.000Z","updated_at":"2025-05-07T02:01:47.000Z","dependencies_parsed_at":"2024-06-18T15:37:34.193Z","dependency_job_id":"2bb32288-33fd-49a0-bda4-75e8b330fb4f","html_url":"https://github.com/kurkle/chartjs-chart-sankey","commit_stats":{"total_commits":154,"total_committers":18,"mean_commits":8.555555555555555,"dds":0.3311688311688312,"last_synced_commit":"b5623a64ac01ee1b8f296efb6f7991049da4e845"},"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kurkle%2Fchartjs-chart-sankey","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kurkle%2Fchartjs-chart-sankey/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kurkle%2Fchartjs-chart-sankey/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kurkle%2Fchartjs-chart-sankey/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kurkle","download_url":"https://codeload.github.com/kurkle/chartjs-chart-sankey/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254509476,"owners_count":22082891,"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":[],"created_at":"2024-07-30T19:01:06.816Z","updated_at":"2025-05-16T10:06:24.982Z","avatar_url":"https://github.com/kurkle.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","JavaScript","Charts"],"sub_categories":[],"readme":"# chartjs-chart-sankey\n\n[Chart.js](https://www.chartjs.org/) **^3.3** module for creating sankey diagrams\n\n![CI](https://github.com/kurkle/chartjs-chart-sankey/workflows/CI/badge.svg)\n[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=kurkle_chartjs-chart-sankey\u0026metric=alert_status)](https://sonarcloud.io/summary/new_code?id=kurkle_chartjs-chart-sankey)\n[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=kurkle_chartjs-chart-sankey\u0026metric=coverage)](https://sonarcloud.io/summary/new_code?id=kurkle_chartjs-chart-sankey)\n[![npm](https://img.shields.io/npm/v/chartjs-chart-sankey.svg)](https://www.npmjs.com/package/chartjs-chart-sankey)\n[![pre-release](https://img.shields.io/github/v/release/kurkle/chartjs-chart-sankey?include_prereleases\u0026style=flat-square)](https://github.com/kurkle/chartjs-chart-sankey/releases/latest)\n![npm bundle size](https://img.shields.io/bundlephobia/min/chartjs-chart-sankey.svg)\n![GitHub](https://img.shields.io/github/license/kurkle/chartjs-chart-sankey.svg)\n\n## Browser support\n\nAll modern and up-to-date browsers are supported, including, but not limited to:\n\n- Chrome\n- Edge\n- Firefox\n- Safari\n\nInternet Explorer 11 is not supported.\n\n## Typescript\n\nTypescript 3.x and higher is supported.\n\n## Documentation\n\nYou can use **chartjs-chart-sankey.js** as ES module. You'll need to manually register two components\n\n```js\nimport {Chart} from 'chart.js';\nimport {SankeyController, Flow} from 'chartjs-chart-sankey';\n\nChart.register(SankeyController, Flow);\n```\n\nTo create a sankey chart, include chartjs-chart-sankey.js after chart.js and then create the chart by setting the `type`\nattribute to `'sankey'`\n\n```js\nconst chart = new Chart(ctx, {\n  type: 'sankey',\n  data: dataObject\n});\n```\n\n## Configuration\n\nExample:\n\n```js\nconst colors = {\n  a: 'red',\n  b: 'green',\n  c: 'blue',\n  d: 'gray'\n};\n\nconst getHover = (key) =\u003e colors[key];\nconst getColor = (key) =\u003e colors[key];\n\nconst chart = new Chart(ctx, {\n  type: 'sankey',\n  data: {\n    datasets: [{\n      label: 'My sankey',\n      data: [\n        {from: 'a', to: 'b', flow: 10},\n        {from: 'a', to: 'c', flow: 5},\n        {from: 'b', to: 'c', flow: 10},\n        {from: 'd', to: 'c', flow: 7}\n      ],\n      colorFrom: (c) =\u003e getColor(c.dataset.data[c.dataIndex].from),\n      colorTo: (c) =\u003e getColor(c.dataset.data[c.dataIndex].to),\n      hoverColorFrom: (c) =\u003e getHover(c.dataset.data[c.dataIndex].from),\n      hoverColorTo: (c) =\u003e getHover(c.dataset.data[c.dataIndex].to),\n      colorMode: 'gradient', // or 'from' or 'to'\n      /* optionally override default alpha (0.5) applied to colorFrom and colorTo */\n      alpha: 1,\n      /* optional labels */\n      labels: {\n        a: 'Label A',\n        b: 'Label B',\n        c: 'Label C',\n        d: 'Label D'\n      },\n      /* optional priority */\n      priority: {\n        b: 1,\n        d: 0\n      },\n      /* optional column overrides */\n      column: {\n        d: 1\n      },\n      size: 'max', // or 'min' if flow overlap is preferred\n    }]\n  },\n});\n```\n\n### Custom data structure\n\nCustom data structure can be used by specifying the custom data keys in `options.parsing`.\nFor example:\n\n```js\nconst chart = new Chart(ctx, {\n  type: 'sankey',\n  data: {\n    datasets: [\n      {\n        data: [\n          {source: 'a', destination: 'b', value: 20},\n          {source: 'c', destination: 'd', value: 10},\n          {source: 'c', destination: 'e', value: 5},\n        ],\n        colorFrom: 'red',\n        colorTo: 'green'\n      }\n    ]\n  },\n  options: {\n    parsing: {\n      from: 'source',\n      to: 'destination',\n      flow: 'value'\n    }\n  }\n});\n```\n\n## Example\n\n![Sankey Example Image](test/fixtures/energy.png)\n\n## Online examples\n\n[codepen](https://codepen.io/kurkle/pen/bGVKPOM)\n[Vue.js 2](https://codesandbox.io/s/reverent-boyd-od2fr?file=/src/App.vue)\n\n## Development\n\nYou first need to install node dependencies  (requires [Node.js](https://nodejs.org/)):\n\n```bash\n\u003e npm install\n```\n\nThe following commands will then be available from the repository root:\n\n```bash\n\u003e npm run build         // build dist files\n\u003e npm run autobuild     // build and watch for changes\n\u003e npm test              // run all tests\n\u003e npm autotest          // run all tests and watch for changes\n\u003e npm lint              // perform code linting\n\u003e npm package           // create an archive with dist files and samples\n```\n\n## License\n\nchartjs-chart-sankey is available under the [MIT license](https://opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkurkle%2Fchartjs-chart-sankey","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkurkle%2Fchartjs-chart-sankey","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkurkle%2Fchartjs-chart-sankey/lists"}