{"id":13701863,"url":"https://github.com/sgratzl/chartjs-chart-boxplot","last_synced_at":"2025-04-08T12:11:23.146Z","repository":{"id":37948915,"uuid":"255657955","full_name":"sgratzl/chartjs-chart-boxplot","owner":"sgratzl","description":"Chart.js Box Plots and Violin Plot Charts","archived":false,"fork":false,"pushed_at":"2024-10-20T17:11:06.000Z","size":15724,"stargazers_count":109,"open_issues_count":3,"forks_count":24,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-10-22T23:53:14.093Z","etag":null,"topics":["boxplot","charting-boxplots","chartjs","chartjs-plugin","javascript","violinplot"],"latest_commit_sha":null,"homepage":"https://www.sgratzl.com/chartjs-chart-boxplot/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"datavisyn/chartjs-chart-box-and-violin-plot","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":"2020-04-14T16:08:24.000Z","updated_at":"2024-10-20T17:09:59.000Z","dependencies_parsed_at":"2024-03-02T02:34:00.922Z","dependency_job_id":"83423222-7f40-4fcc-9ecc-2395143b402c","html_url":"https://github.com/sgratzl/chartjs-chart-boxplot","commit_stats":{"total_commits":364,"total_committers":13,"mean_commits":28.0,"dds":0.4340659340659341,"last_synced_commit":"00e4661feade29ecf10e55409bce5752dea796eb"},"previous_names":[],"tags_count":63,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sgratzl%2Fchartjs-chart-boxplot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sgratzl%2Fchartjs-chart-boxplot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sgratzl%2Fchartjs-chart-boxplot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sgratzl%2Fchartjs-chart-boxplot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sgratzl","download_url":"https://codeload.github.com/sgratzl/chartjs-chart-boxplot/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247838446,"owners_count":21004580,"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":["boxplot","charting-boxplots","chartjs","chartjs-plugin","javascript","violinplot"],"created_at":"2024-08-02T21:00:25.532Z","updated_at":"2025-04-08T12:11:23.106Z","avatar_url":"https://github.com/sgratzl.png","language":"TypeScript","readme":"# Chart.js Box and Violin Plot\n\n[![License: MIT][mit-image]][mit-url] [![NPM Package][npm-image]][npm-url] [![Github Actions][github-actions-image]][github-actions-url]\n\nChart.js module for charting box and violin plots. This is a maintained fork of [@datavisyn/chartjs-chart-box-and-violin-plot](https://github.com/datavisyn/chartjs-chart-box-and-violin-plot), which I originally developed during my time at datavisyn.\n\n![Box Plot](https://user-images.githubusercontent.com/4129778/42724341-9a6ec554-8770-11e8-99b5-626e34dafdb3.png)\n![Violin Plot](https://user-images.githubusercontent.com/4129778/42724342-9a8dbb58-8770-11e8-9a30-3e69d07d3b79.png)\n\n## Install\n\n```bash\nnpm install chart.js @sgratzl/chartjs-chart-boxplot\n```\n\n## Usage\n\nsee [Examples](https://www.sgratzl.com/chartjs-chart-boxplot/examples/)\n\nand [![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/QxoLoY)\n\n## Chart\n\nfour new types: `boxplot` and `violin`.\n\n## Config\n\nThe config can be done on a per dataset `.data.datasets[0].minStats` or for all datasets under the controllers name. e.g., `.options.boxplot.datasets.minStats`.\n\nsee https://github.com/sgratzl/chartjs-chart-boxplot/blob/dev/src/data.ts#L100-L147\n\n## Data structure\n\nBoth types support that the data is given as an array of numbers `number[]`. The statistics will be automatically computed. In addition, specific summary data structures are supported:\n\nsee https://github.com/sgratzl/chartjs-chart-boxplot/blob/dev/src/data.ts#L24-L49\n\n## Tooltips\n\nIn order to simplify the customization of the tooltips the tooltip item given to the tooltip callbacks was improved. The default `toString()` behavior should be fine in most cases. The tooltip item has the following structure:\n\n```ts\ninterface ITooltipItem {\n  label: string; // original\n  value: {\n    raw: IBoxPlotItem | IViolinItem;\n    /**\n     * in case an outlier is hovered this will contains its index\n     * @default -1\n     */\n    hoveredOutlierRadius: number;\n    /**\n     * toString function with a proper default implementation, which is used implicitly\n     */\n    toString(): string;\n\n    min: string;\n    median: string;\n    max: string;\n    items?: string[];\n\n    //... the formatted version of different attributes IBoxPlotItem or ViolinItem\n  };\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, LinearScale, CategoryScale } from 'chart.js';\nimport { BoxPlotController, BoxAndWiskers } from '@sgratzl/chartjs-chart-boxplot';\n\n// register controller in chart.js and ensure the defaults are set\nChart.register(BoxPlotController, BoxAndWiskers, LinearScale, CategoryScale);\n...\n\nnew Chart(ctx, {\n  type: 'boxplot',\n  data: [...],\n});\n```\n\nVariant B:\n\n```js\nimport { BoxPlotChart } from '@sgratzl/chartjs-chart-boxplot';\n\nnew BoxPlotChart(ctx, {\n  data: [...],\n});\n```\n\n## Related Plugins\n\nCheck out also my other chart.js plugins:\n\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-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## 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## Credits\n\nOriginal credits belong to [@datavisyn](https://www.datavisyn.io).\n\n[mit-image]: https://img.shields.io/badge/License-MIT-yellow.svg\n[mit-url]: https://opensource.org/licenses/MIT\n[npm-image]: https://badge.fury.io/js/%40sgratzl%2Fchartjs-chart-boxplot.svg\n[npm-url]: https://npmjs.org/package/@sgratzl/chartjs-chart-boxplot\n[github-actions-image]: https://github.com/sgratzl/chartjs-chart-boxplot/workflows/ci/badge.svg\n[github-actions-url]: https://github.com/sgratzl/chartjs-chart-boxplot/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-boxplot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsgratzl%2Fchartjs-chart-boxplot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsgratzl%2Fchartjs-chart-boxplot/lists"}