{"id":13701868,"url":"https://github.com/sgratzl/chartjs-chart-error-bars","last_synced_at":"2025-04-05T09:10:01.274Z","repository":{"id":35122064,"uuid":"208944836","full_name":"sgratzl/chartjs-chart-error-bars","owner":"sgratzl","description":"Chart.js Plugin for showing error bars for various chart types","archived":false,"fork":false,"pushed_at":"2025-03-01T00:46:31.000Z","size":15667,"stargazers_count":47,"open_issues_count":9,"forks_count":6,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-03-29T08:09:37.427Z","etag":null,"topics":["chartjs","chartjs-error-bars","chartjs-plugin","error-bars","javascript"],"latest_commit_sha":null,"homepage":"http://www.sgratzl.com/chartjs-chart-error-bars/","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-17T02:49:39.000Z","updated_at":"2024-11-16T18:16:27.000Z","dependencies_parsed_at":"2024-03-02T02:33:56.717Z","dependency_job_id":"a5a65199-4eb1-4341-838e-9c2a8084978f","html_url":"https://github.com/sgratzl/chartjs-chart-error-bars","commit_stats":{"total_commits":191,"total_committers":4,"mean_commits":47.75,"dds":0.2722513089005235,"last_synced_commit":"d02986280e45b5110e01aac1f695b50e09666172"},"previous_names":[],"tags_count":47,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sgratzl%2Fchartjs-chart-error-bars","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sgratzl%2Fchartjs-chart-error-bars/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sgratzl%2Fchartjs-chart-error-bars/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sgratzl%2Fchartjs-chart-error-bars/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sgratzl","download_url":"https://codeload.github.com/sgratzl/chartjs-chart-error-bars/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247312083,"owners_count":20918344,"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-error-bars","chartjs-plugin","error-bars","javascript"],"created_at":"2024-08-02T21:00:25.693Z","updated_at":"2025-04-05T09:10:00.846Z","avatar_url":"https://github.com/sgratzl.png","language":"TypeScript","readme":"# Chart.js Error Bars\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 error bars plots. This plugin extends the several char types (`bar`, `line`, `scatter`, `polarArea`)\nwith their error bar equivalent (`barWithErrorBars`, `lineWithErrorBars`, `scatterWithErrorBars`, `polarAreaWithErrorBars`).\n\nBar Chart\n\n![bar char with error bars](https://user-images.githubusercontent.com/4129778/65203797-1a9e3b00-da5a-11e9-9de7-9cbcf75dfeda.png)\n\nHorizontal Bar Chart\n\n![horizontal bar chart with error bars](https://user-images.githubusercontent.com/4129778/65203796-1a9e3b00-da5a-11e9-9c43-db503679178c.png)\n\nLine Chart\n\n![line chart with error bars](https://user-images.githubusercontent.com/4129778/65203795-1a05a480-da5a-11e9-98fa-05440371485f.png)\n\nScatterplot\n\n![scatter plot with error bars](https://user-images.githubusercontent.com/4129778/65203792-1a05a480-da5a-11e9-9073-6e849d42af64.png)\n\nPolar Area plot\n\n![polar area plot with error bars](https://user-images.githubusercontent.com/4129778/65203794-1a05a480-da5a-11e9-9b17-316ecc6ae0d9.png)\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-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## Install\n\n```bash\nnpm install --save chart.js chartjs-chart-error-bars\n```\n\n## Usage\n\nsee [Examples](https://www.sgratzl.com/chartjs-chart-error-bars/examples)\n\nand [![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/ZEbqmqx)\n\n## Styling\n\nSeveral new styling keys are added to the individual chart types\n\n## Data structure\n\nThe data structure depends on the chart type. It uses the fact that chart.js is supporting scatterplots. Thus, it is already prepared for object values.\n\n### Chart types: `bar` and `line`\n\nsee TypeScript Interface:\n\n[IErrorBarXDataPoint](https://github.com/sgratzl/chartjs-chart-error-bars/blob/main/src/controllers/base.ts#L3-L16)\n\n### Chart type: `bar` with `indexAxis: 'y'`\n\n[IErrorBarYDataPoint](https://github.com/sgratzl/chartjs-chart-error-bars/blob/main/src/controllers/base.ts#L18-L31)\n\n### Chart type: `scatter`\n\na combination of the previous two ones\n\n[IErrorBarXDataPoint](https://github.com/sgratzl/chartjs-chart-error-bars/blob/main/src/controllers/base.ts#L3-L16)\n\nand\n\n[IErrorBarYDataPoint](https://github.com/sgratzl/chartjs-chart-error-bars/blob/main/src/controllers/base.ts#L18-L31)\n\n### Chart type: `polarArea`\n\n[IErrorBarRDataPoint](https://github.com/sgratzl/chartjs-chart-error-bars/blob/main/src/controllers/base.ts#L33-L46)\n\n## Multiple Error Bars\n\nMultiple error bars are supported.\n\n![multiple error bars](https://user-images.githubusercontent.com/4129778/65359671-3d039600-dbcb-11e9-905e-1dd22b5e8783.png)\n\n### Styling\n\nThe styling options support different array version.\n\n**Note**: as with other chart.js style options, using an array will be one value per dataset. Thus, to specify the values for different error bars, one needs to wrap it in an object with a `v` key having the value itself. The outer for the dataset, the inner for the error bars.\n\nsee TypeScript interface:\n\n[IErrorBarOptions](https://github.com/sgratzl/chartjs-chart-error-bars/blob/main/src/elements/render.ts#L17-L54)\n\n### Data structure\n\nJust use array of numbers for the corresponding data structures attributes (`xMin`, `xMax`, `yMin`, `yMax`). The error bars will be rendered in reversed order. Thus, by convention the most inner error bar is in the first place.\n\ne.g.\n\n```ts\n{\n  y: 4,\n  yMin: [2, 1],\n  yMax: [5, 6]\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 { BarWithErrorBarsController, BarWithErrorBar } from 'chartjs-chart-error-bars';\n\n// register controller in chart.js and ensure the defaults are set\nChart.register(BarWithErrorBarsController, BarWithErrorBar, LinearScale, CategoryScale);\n\nconst chart = new Chart(document.getElementById('canvas').getContext('2d'), {\n  type: BarWithErrorBarsController.id,\n  data: {\n    labels: ['A', 'B'],\n    datasets: [\n      {\n        data: [\n          {\n            y: 4,\n            yMin: 1,\n            yMax: 6,\n          },\n          {\n            y: 2,\n            yMin: 1,\n            yMax: 4,\n          },\n        ],\n      },\n    ],\n  },\n});\n```\n\nVariant B:\n\n```js\nimport { BarWithErrorBarsChart } from 'chartjs-chart-error-bars';\n\nconst chart = new BarWithErrorBarsChart(document.getElementById('canvas').getContext('2d'), {\n  data: {\n    //...\n  },\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[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/chartjs-chart-error-bars.svg\n[npm-url]: https://npmjs.org/package/chartjs-chart-error-bars\n[github-actions-image]: https://github.com/sgratzl/chartjs-chart-error-bars/workflows/ci/badge.svg\n[github-actions-url]: https://github.com/sgratzl/chartjs-chart-error-bars/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-error-bars","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsgratzl%2Fchartjs-chart-error-bars","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsgratzl%2Fchartjs-chart-error-bars/lists"}