{"id":13701890,"url":"https://github.com/sgratzl/chartjs-chart-pcp","last_synced_at":"2025-05-07T19:02:36.228Z","repository":{"id":38039670,"uuid":"255605106","full_name":"sgratzl/chartjs-chart-pcp","owner":"sgratzl","description":"Chart.js Parallel Coordinates Plot","archived":false,"fork":false,"pushed_at":"2025-04-12T15:10:10.000Z","size":17775,"stargazers_count":27,"open_issues_count":9,"forks_count":3,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-29T04:04:42.877Z","etag":null,"topics":["chartjs","chartjs-plugin","javascript","parallel-coordinates","parallel-coordinates-plot"],"latest_commit_sha":null,"homepage":"https://www.sgratzl.com/chartjs-chart-pcp/","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":"2020-04-14T12:37:23.000Z","updated_at":"2025-03-25T22:56:33.000Z","dependencies_parsed_at":"2024-03-02T02:36:42.432Z","dependency_job_id":"7b3871cf-5df6-4ae7-bb29-2355423f86fd","html_url":"https://github.com/sgratzl/chartjs-chart-pcp","commit_stats":{"total_commits":146,"total_committers":2,"mean_commits":73.0,"dds":0.07534246575342463,"last_synced_commit":"068489e7f41b350ade8df882475d2c833ed87ca9"},"previous_names":[],"tags_count":37,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sgratzl%2Fchartjs-chart-pcp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sgratzl%2Fchartjs-chart-pcp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sgratzl%2Fchartjs-chart-pcp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sgratzl%2Fchartjs-chart-pcp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sgratzl","download_url":"https://codeload.github.com/sgratzl/chartjs-chart-pcp/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252940883,"owners_count":21828766,"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","javascript","parallel-coordinates","parallel-coordinates-plot"],"created_at":"2024-08-02T21:00:26.595Z","updated_at":"2025-05-07T19:02:35.996Z","avatar_url":"https://github.com/sgratzl.png","language":"TypeScript","funding_links":["https://github.com/sponsors/sgratzl"],"categories":["Charts"],"sub_categories":[],"readme":"# Chart.js Parallel Coordinate Plots\n\n[![NPM Package][npm-image]][npm-url] [![Github Actions][github-actions-image]][github-actions-url]\n\nChart.js module for charting parallel coordinate plots (PCPs). Adding new chart type: `pcp`.\n\n![MTCars](https://user-images.githubusercontent.com/4129778/79225882-bad80900-7e5d-11ea-89cf-f59f30987882.png)\n\n[![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/wvKQvyM)\n\n![MTCars Tooltip](https://user-images.githubusercontent.com/4129778/79225877-b9a6dc00-7e5d-11ea-8dd4-ee554ebb6385.png)\n\n![MTCars Tension](https://user-images.githubusercontent.com/4129778/79236173-e9a9ab80-7e6c-11ea-9f3c-28c4a3a79406.png)\n\n[![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/KKdrKZW)\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-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-pcp\n```\n\n## Usage\n\nsee [Examples](https://www.sgratzl.com/chartjs-chart-pcp/examples/)\n\n[![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/wvKQvyM)\n\n## PCP\n\n### Data Structure\n\nthe data items are the regular data items along with their labels. For each attribute there is a dataset. e.g., in the following example there are three items (A, B, C) with three axes / features (f1, f2, f3).\n\n```js\nconst objs = [\n  { label: 'A', f1: 5, f2: 3, f4: 3 },\n  { label: 'B', f1: 2, f2: 1, f4: 8 },\n  { label: 'C', f1: 10, f2: 6, f4: 2 },\n];\nconst attrs = ['f1', 'f2', 'f3'];\nconst config = {\n  type: 'pcp',\n  data: {\n    labels: objs.map((obj) =\u003e obj.label),\n    datasets: attrs.map((attr) =\u003e ({\n      label: attr,\n      data: objs.map((obj) =\u003e obj[attr]),\n    })),\n  },\n  options: {},\n};\n```\n\n### Styling of elements\n\nTwo new elements were added: `lineSegment` as a subclass of line for a line segment between two axes and `linearAxis` for representing the vertical axis as a wrapper around a linear scale.\n\nsee https://github.com/sgratzl/chartjs-chart-pcp/blob/develop/src/elements/lineSegment.ts#L3-L9\n\nsee https://github.com/sgratzl/chartjs-chart-pcp/blob/develop/src/elements/axis.ts#L13-L21\n\n## Scaling\n\nThe Parallel Coordinates controller `pcp` uses a linear scale. There is also the `logarithmicPcp` that uses a logarithmic scale.\nUsing chart.js hybrid charts, one can specify the type per dataset. e.g.,\n\n```js\nconst config = {\n  type: 'pcp',\n  data: {\n    labels: ['1', '2', '3'],\n    datasets: [\n      {\n        label: 'A',\n        data: [1, 2, 3]\n      },\n      {\n        type: 'logarithmicPcp',\n        label: 'B',\n        data: [1, 2, 10000]\n      }\n    })),\n  },\n  options: {},\n};\n```\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 from 'chart.js';\nimport { ParallelCoordinatesController, LinearAxis, LineSegment, PCPScale } from 'chartjs-chart-pcp';\n\nChart.register(ParallelCoordinatesController, PCPScale, LineSegment);\nChart.registry.addElements(LinearAxis);\n...\n\nnew Chart(ctx, {\n  type: ParallelCoordinatesController.id,\n  data: [...],\n});\n```\n\nVariant B:\n\n```js\nimport { ParallelCoordinatesChart } from 'chartjs-chart-pcp';\n\nnew ParallelCoordinatesChart(ctx, {\n  data: [...],\n});\n```\n\n## Development Environment\n\n```sh\nnpm i -g yarn\nyarn install\nyarn sdks vscode\n```\n\n### Common commands\n\n```sh\nyarn compile\nyarn test\nyarn lint\nyarn fix\nyarn build\nyarn docs\n```\n\n[npm-image]: https://badge.fury.io/js/chartjs-chart-pcp.svg\n[npm-url]: https://npmjs.org/package/chartjs-chart-pcp\n[github-actions-image]: https://github.com/sgratzl/chartjs-chart-pcp/workflows/ci/badge.svg\n[github-actions-url]: https://github.com/sgratzl/chartjs-chart-pcp/actions\n[codepen]: https://img.shields.io/badge/CodePen-open-blue?logo=codepen\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsgratzl%2Fchartjs-chart-pcp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsgratzl%2Fchartjs-chart-pcp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsgratzl%2Fchartjs-chart-pcp/lists"}