{"id":28505061,"url":"https://github.com/ghostery/apexsankey","last_synced_at":"2026-02-01T15:31:38.667Z","repository":{"id":289234779,"uuid":"968538822","full_name":"ghostery/apexsankey","owner":"ghostery","description":"Fork of the ApexSankey chart library","archived":false,"fork":false,"pushed_at":"2025-04-22T07:57:54.000Z","size":97,"stargazers_count":1,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-12-01T01:53:26.677Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ghostery.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2025-04-18T09:05:40.000Z","updated_at":"2025-10-05T07:46:18.000Z","dependencies_parsed_at":null,"dependency_job_id":"90084706-21ef-435a-9ed2-b0671295988b","html_url":"https://github.com/ghostery/apexsankey","commit_stats":null,"previous_names":["ghostery/apexsankey"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ghostery/apexsankey","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghostery%2Fapexsankey","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghostery%2Fapexsankey/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghostery%2Fapexsankey/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghostery%2Fapexsankey/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ghostery","download_url":"https://codeload.github.com/ghostery/apexsankey/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghostery%2Fapexsankey/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28981061,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-01T13:38:33.235Z","status":"ssl_error","status_checked_at":"2026-02-01T13:38:32.912Z","response_time":56,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5: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":[],"created_at":"2025-06-08T19:06:28.709Z","updated_at":"2026-02-01T15:31:38.663Z","avatar_url":"https://github.com/ghostery.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003e This is a fork of the ApexCharts Sankey library. The original library is not available on GitHub anymore, and NPM version has a bug that prevents it from working. This the latest version of the original library.\n\n# ApexSankey\n\nA JavaScript library to create Sankey diagrams built on SVG\n\n\u003cimg width=\"752\" alt=\"apex-sankey-chart\" src=\"https://github.com/apexcharts/projects/assets/17950663/51e00ff0-79d1-45eb-8815-f8d11e2dd981\"\u003e\n\n## Dependency\n\nInclude svg.js\n\n```bash\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js\"\u003e\u003c/script\u003e\n```\n\n## Installation\n\nTo add the ApexSankey to your project and its dependencies, install the package from npm.\n\n```bash\nnpm install apexsankey\n```\n\n## Usage\n\n```js\nimport ApexSankey from \"apexsankey\";\n```\n\nTo create a basic sankey with minimal configuration, write as follows:\n\n```html\n\u003cdiv id=\"sankey-container\"\u003e\u003c/div\u003e\n```\n\n```js\n const data = {\n   ...(data with format provided below)\n }\n const options = {\n    width: 800,\n    height: 800,\n    canvasStyle: 'border: 1px solid #caced0; background: #f6f6f6;',\n    spacing: 100,\n    nodeWidth: 20,\n };\n const sankey = new ApexSankey(document.getElementById('sankey-container'), options);\n const graph = sankey.render(data);\n```\n\n## ApexSankey Options\n\nThe layout can be configured by either setting the properties in the table below by passing a second arg to ApexSankey with these properties set. The latter takes precedence.\n\n| Options            | Default                    | Description                                                                       |\n| ------------------ | -------------------------- | --------------------------------------------------------------------------------- |\n| width              | 800                        | The width of graph container                                                      |\n| height             | 800                        | The height of graph container                                                     |\n| canvasStyle        | None                       | The css styles for canvas root container                                          |\n| spacing            | 100                        | The spacing from top and left of graph container                                  |\n| nodeWidth          | 20                         | The width of graph nodes                                                          |\n| nodeBorderWidth    | 1                          | The border width of the nodes in pixels                                           |\n| nodeBorderColor    | none                       | The border color of the nodes                                                     |\n| onNodeClick        | empty function             | The callback function for node click. Node object will be parameter for callback. |\n| edgeOpacity        | 0.4                        | The opacity value for edges. Values must be between 0 to 1 and in fraction.       |\n| enableTooltip      | false                      | Enable tooltip on hover of nodes                                                  |\n| tooltipId          | `sankey-tooltip-container` | The tooltip HTML element id                                                       |\n| tooltipTemplate    | tooltipTemplate            | The HTML template for tooltip                                                     |\n| tooltipBorderColor | `#BCBCBC`                  | The border color of tooltip                                                       |\n| tooltipBGColor     | `#FFFFFF`                  | The background color of tooltip                                                   |\n| fontSize           | `14px`                     | The size of font of nodes                                                         |\n| fontFamily         | None                       | The font family of nodes                                                          |\n| fontWeight         | 400                        | The font weight of nodes                                                          |\n| fontColor          | `#000000`                  | The font color of nodes                                                           |\n\nDefault tooltip template\n\n```js\nconst tooltipTemplate = ({source, target, value}) =\u003e {\n    return `\n      \u003cdiv style='display:flex;align-items:center;gap:5px;'\u003e\n        \u003cdiv style='width:12px;height:12px;background-color:${source.color}'\u003e\u003c/div\u003e\n        \u003cdiv\u003e${source.title}\u003c/div\u003e\n        \u003cdiv\u003e=\u003e\u003c/div\u003e\n        \u003cdiv style='width:12px;height:12px;background-color:${target.color}'\u003e\u003c/div\u003e\n        \u003cdiv\u003e${target.title}\u003c/div\u003e\n        \u003cdiv\u003e: ${value}\u003c/div\u003e\n      \u003c/div\u003e\n    `;\n  },\n```\n\n### Expected data format\n\nPassed data should be an object containing nodes, edges and options. Nodes, edges and options should be in below format.\n\n- _nodes_ : Passed node object should contain id and title. _Id_ is for uniquely identifying nodes and _title_ is for node titles. It will be also used for showing tooltips for node-to-node connections.\n\n```json\n{\n  \"id\": \"1\", // required\n  \"title\": \"A\" // required\n}\n```\n\n- _edges_ : Passed edge object should contain source, target, value and type. _source_ is id value of source node for edge, _target_ is id value of target node for edge, _value_ indicates edge size and _type_ is for grouping nodes.\n\n```json\n{\n    \"source\": \"a\",    // required\n    \"target\": \"b\",    // required\n    \"value\": 1,       // required\n    \"type\": \"x\",      // optional\n},\n```\n\n- _options_ : ApexSankey supports two options order and alightLinkTypes.\n\n  - _order_: optional list of layers\n\n    If order is not specified, the nodes are automatically assigned to layers. If order is specified, it is used directly and no rank assignment or ordering algorithm takes place.\n\n    The order structure has three nested lists: order is a list of layers, each of which is a list of bands, each of which is a list of node ids.\n    For example,\n\n    ```json\n    {\n        \"order\": [\n            [[\"a\", \"b\"]],\n            [[\"c\"]],\n        ],\n    },\n    ```\n\n  - _alignLinkTypes_: boolean (default false). Whether to align link types across nodes, or order links to minimise crossings.\n\n**Example**\n\n```js\nconst data = {\n  nodes: [\n    {\n      id: \"a\",\n      title: \"AAA\",\n    },\n    {\n      id: \"b\",\n      title: \"BBB\",\n    },\n    {\n      id: \"c\",\n      title: \"CCC\",\n    },\n  ],\n  edges: [\n    {\n      source: \"a\",\n      target: \"c\",\n      value: 1,\n      type: \"A\",\n    },\n    {\n      source: \"b\",\n      target: \"c\",\n      value: 2,\n      type: \"A\",\n    },\n  ],\n  options: {\n    order: [[[\"a\", \"b\"]], [[\"c\"]]],\n  },\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fghostery%2Fapexsankey","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fghostery%2Fapexsankey","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fghostery%2Fapexsankey/lists"}