{"id":13701880,"url":"https://github.com/sgratzl/chartjs-chart-graph","last_synced_at":"2025-04-05T12:05:47.800Z","repository":{"id":35125963,"uuid":"209696110","full_name":"sgratzl/chartjs-chart-graph","owner":"sgratzl","description":"Chart.js Graph-like Charts (tree, force directed)","archived":false,"fork":false,"pushed_at":"2024-04-11T11:56:08.000Z","size":14516,"stargazers_count":158,"open_issues_count":4,"forks_count":20,"subscribers_count":6,"default_branch":"main","last_synced_at":"2024-05-02T00:05:56.836Z","etag":null,"topics":["chartjs","chartjs-plugin","d3-force","d3-hierarchy","dendogram","force-directed","graphs","javascript","node-link","radial-layout","tidy-tree"],"latest_commit_sha":null,"homepage":"https://www.sgratzl.com/chartjs-chart-graph/","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},"funding":{"github":["sgratzl"]}},"created_at":"2019-09-20T03:19:50.000Z","updated_at":"2024-06-08T22:42:03.333Z","dependencies_parsed_at":"2024-03-02T02:35:41.647Z","dependency_job_id":"47de7db3-2e74-4799-84e7-91507b5a4cc0","html_url":"https://github.com/sgratzl/chartjs-chart-graph","commit_stats":{"total_commits":212,"total_committers":6,"mean_commits":"35.333333333333336","dds":0.3207547169811321,"last_synced_commit":"c3f05624f5e5148147e6d5e0202d0bdeadee36ee"},"previous_names":[],"tags_count":45,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sgratzl%2Fchartjs-chart-graph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sgratzl%2Fchartjs-chart-graph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sgratzl%2Fchartjs-chart-graph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sgratzl%2Fchartjs-chart-graph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sgratzl","download_url":"https://codeload.github.com/sgratzl/chartjs-chart-graph/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247332604,"owners_count":20921853,"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","d3-force","d3-hierarchy","dendogram","force-directed","graphs","javascript","node-link","radial-layout","tidy-tree"],"created_at":"2024-08-02T21:00:26.259Z","updated_at":"2025-04-05T12:05:47.778Z","avatar_url":"https://github.com/sgratzl.png","language":"TypeScript","readme":"# Chart.js Graphs\n\n[![NPM Package][npm-image]][npm-url] [![Github Actions][github-actions-image]][github-actions-url]\n\nChart.js module for charting graphs. Adding new chart types: `graph`, `forceDirectedGraph`, `dendrogram`, and `tree`.\n\n![force](https://user-images.githubusercontent.com/4129778/65398353-9bc03f80-dd84-11e9-8f14-339635c1ba4e.png)\n\n![dend_h](https://user-images.githubusercontent.com/4129778/65398352-9bc03f80-dd84-11e9-9197-ecb66a872736.png)\n\n![tree_v](https://user-images.githubusercontent.com/4129778/65398350-9bc03f80-dd84-11e9-8c94-e93c07040ee7.png)\n\n![radial](https://user-images.githubusercontent.com/4129778/65398354-9bc03f80-dd84-11e9-9633-c4c80bd9c384.png)\n\nWorks great with https://github.com/chartjs/chartjs-plugin-datalabels or https://github.com/chrispahm/chartjs-plugin-dragdata\n\n![data label](https://user-images.githubusercontent.com/4129778/65398517-a0392800-dd85-11e9-800a-144a13ad2ba1.png)\n\n[![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/vYNVbgd)\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-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 --save chart.js chartjs-chart-graph\n```\n\n## Usage\n\nsee [Examples](https://www.sgratzl.com/chartjs-chart-graph/examples/)\n\nCodePens\n\n- [Force Directed Layout](https://codepen.io/sgratzl/pen/mdezvmL)\n- [Tree Layouts](https://codepen.io/sgratzl/pen/jObedwg)\n- [Tree With Data Labels](https://codepen.io/sgratzl/pen/vYNVbgd)\n\n## Graphviz Dot File Parsing\n\nA Graphviz Dot File parsing package is located at https://github.com/sgratzl/chartjs-chart-graph-dot-parser.\nIt creates compatible data structures to be consumed by this plugin.\n\n## Styling\n\nThe new chart types are based on the existing `line` controller. Tho, instead of showing a line per dataset it shows edges as lines. Therefore, the styling options for points and lines are the same. See also https://www.chartjs.org/docs/latest/charts/line.html. However, to avoid confusion, the line options have a default `line` prefix, e..g `lineBorderColor` to specify the edge border color and `pointBorderColor` to specify the node border color.\n\n## Data Structure\n\n```js\ndata: {\n  labels: ['A', 'B', 'C'], // node labels\n  datasets: [{\n    data: [ // nodes as objects\n      { x: 1, y: 2 }, // x, y will be set by the force directed graph and can be omitted\n      { x: 3, y: 1 },\n      { x: 5, y: 3 }\n    ],\n    edges: [ // edge list where source/target refers to the node index\n      { source: 0, target: 1},\n      { source: 0, target: 2}\n    ]\n  }]\n},\n```\n\nAlternative structure for trees\n\n```js\ndata: {\n  labels: ['A', 'B', 'C'], // node labels\n  datasets: [{\n    data: [ // nodes as objects\n      { x: 1, y: 2 }, // x, y will be set by the force directed graph and can be omitted\n      { x: 3, y: 1, parent: 0 },\n      { x: 5, y: 3, parent: 0 }\n    ]\n  }]\n},\n```\n\n## Force Directed Graph\n\nchart type: `forceDirectedGraph`\n\nComputes the x,y position of nodes based on a force simulation. It is based on https://github.com/d3/d3-force/.\n\n![force](https://user-images.githubusercontent.com/4129778/65398353-9bc03f80-dd84-11e9-8f14-339635c1ba4e.png)\n\n[![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/mdezvmL)\n\n### Options\n\n## Dendrogram, Tree\n\nchart types: `dendrogram`, `tree`\n\nThe tree and dendrograms layouts are based on https://github.com/d3/d3-hierarchy.\n\n**Dendrogram Horizontal**\n\n![dend_h](https://user-images.githubusercontent.com/4129778/65398352-9bc03f80-dd84-11e9-9197-ecb66a872736.png)\n\n[![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/jObedwg)\n\n**Dendrogram Vertical**\n\n![dend_v](https://user-images.githubusercontent.com/4129778/65398355-9bc03f80-dd84-11e9-9ea3-9501a79491fb.png)\n\n[![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/jObedwg)\n\n**Dendrogram Radial**\n\n![radial](https://user-images.githubusercontent.com/4129778/65398460-581a0580-dd85-11e9-93b6-b70946f1155f.png)\n\n[![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/jObedwg)\n\n**Tidy Tree Horizontal**\n\n![tree_h](https://user-images.githubusercontent.com/4129778/65398351-9bc03f80-dd84-11e9-83f9-50b454fa6929.png)\n\n[![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/jObedwg)\n\n**Tidy Tree Vertical**\n\n![tree_v](https://user-images.githubusercontent.com/4129778/65398350-9bc03f80-dd84-11e9-8c94-e93c07040ee7.png)\n\n[![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/jObedwg)\n\n**Tidy Tree Radial**\n\n![radial](https://user-images.githubusercontent.com/4129778/65398354-9bc03f80-dd84-11e9-9633-c4c80bd9c384.png)\n\n[![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/jObedwg)\n\n### Options\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, PointElement } from 'chart.js';\nimport { ForceDirectedGraphController, EdgeLine } from 'chartjs-chart-graph';\n\n// register controller in chart.js and ensure the defaults are set\nChart.register(ForceDirectedGraphController, EdgeLine, LinearScale, PointElement);\n...\n\nnew Chart(ctx, {\n  type: ForceDirectedGraphController.id,\n  data: [...],\n});\n```\n\nVariant B:\n\n```js\nimport { ForceDirectedGraphChart } from 'chartjs-chart-graph';\n\nnew ForceDirectedGraphChart(ctx, {\n  data: [...],\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[npm-image]: https://badge.fury.io/js/chartjs-chart-graph.svg\n[npm-url]: https://npmjs.org/package/chartjs-chart-graph\n[github-actions-image]: https://github.com/sgratzl/chartjs-chart-graph/workflows/ci/badge.svg\n[github-actions-url]: https://github.com/sgratzl/chartjs-chart-graph/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-graph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsgratzl%2Fchartjs-chart-graph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsgratzl%2Fchartjs-chart-graph/lists"}