{"id":13701903,"url":"https://github.com/y-takey/chartjs-plugin-stacked100","last_synced_at":"2025-04-04T17:10:41.893Z","repository":{"id":41496111,"uuid":"85916043","full_name":"y-takey/chartjs-plugin-stacked100","owner":"y-takey","description":"This plugin for Chart.js that makes your bar chart to 100% stacked bar chart.","archived":false,"fork":false,"pushed_at":"2024-08-30T23:02:51.000Z","size":5032,"stargazers_count":129,"open_issues_count":11,"forks_count":29,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-09-19T11:06:29.632Z","etag":null,"topics":["chartjs","javascript"],"latest_commit_sha":null,"homepage":null,"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/y-takey.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2017-03-23T06:43:40.000Z","updated_at":"2024-09-10T15:00:33.000Z","dependencies_parsed_at":"2023-02-08T07:45:47.181Z","dependency_job_id":"db67f466-90c1-49d0-8fe9-ef3c4c6e5fdf","html_url":"https://github.com/y-takey/chartjs-plugin-stacked100","commit_stats":{"total_commits":180,"total_committers":10,"mean_commits":18.0,"dds":"0.31666666666666665","last_synced_commit":"e83dc87c2a29d3101e00a2ad489dbd74fb58314f"},"previous_names":[],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/y-takey%2Fchartjs-plugin-stacked100","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/y-takey%2Fchartjs-plugin-stacked100/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/y-takey%2Fchartjs-plugin-stacked100/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/y-takey%2Fchartjs-plugin-stacked100/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/y-takey","download_url":"https://codeload.github.com/y-takey/chartjs-plugin-stacked100/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247217222,"owners_count":20903009,"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","javascript"],"created_at":"2024-08-02T21:00:27.076Z","updated_at":"2025-04-04T17:10:41.873Z","avatar_url":"https://github.com/y-takey.png","language":"TypeScript","funding_links":[],"categories":["Charts"],"sub_categories":[],"readme":"# chartjs-plugin-stacked100\n\nThis plugin for Chart.js that makes your bar chart to 100% stacked bar chart.\n\nRequires **Chart.js v3 or higher**.\n\nDemo: https://y-takey.github.io/chartjs-plugin-stacked100\n\n![Result image](https://raw.githubusercontent.com/y-takey/chartjs-plugin-stacked100/master/100%25stacked-bar-chart.png)\n\n## Installation\n\n### npm\n\n```\nyarn add chartjs-plugin-stacked100\n```\n\nor\n\n```\nnpm install chartjs-plugin-stacked100 --save\n```\n\n```js\nimport { Chart } from \"chart.js\";\nimport ChartjsPluginStacked100 from \"chartjs-plugin-stacked100\";\n\nChart.register(ChartjsPluginStacked100);\n```\n\n### CDN\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/chartjs-plugin-stacked100@1.0.0\"\u003e\u003c/script\u003e\n```\n\n```js\nChart.register(ChartjsPluginStacked100.default);\n```\n\n## Options\n\n| Name                | Type                          | Default | Description                                                                                                                                 |\n| :------------------ | :---------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------ |\n| enable              | boolean                       | false   |                                                                                                                                             |\n| replaceTooltipLabel | boolean                       | true    | replace tooltip label automatically.                                                                                                        |\n| fixNegativeScale    | boolean                       | true    | when datasets has negative value and `fixNegativeScale` is `false`, the nagative scale is variable. (the range is between `-100` and `-1`)  |\n| individual          | boolean                       | false   | scale the highest bar to 100%, and the rest would be proportional to the highest bar of a stack.                                            |\n| round               | `\"off\"` \\| `\"down\"` \\| `\"up\"` | `\"off\"` | Use `\"off\"` to `Math.round`, `\"down\"` to `Math.floor`, and `\"up\"` to `Math.ceil`.                                                           |\n| precision           | number                        | 1       | precision of percentage. the range is between `0` and `16`                                                                                  |\n| axisId              | string                        | -       | This option allows you to stack only the axis in a chart that includes multiple axes. By default, the plugin will attempt to stack all axes |\n\n## Usage\n\n### Basic\n\nspecify plugin options with `{ stacked100: { enable: true } }`.\n\n### Use your tooltip label\n\nspecify plugin options with `{ stacked100: { enable: true, replaceTooltipLabel: false } }`.\nand you can pass tooltip option.\n\n```javascript\nnew Chart(document.getElementById(\"my-chart\"), {\n  type: \"bar\",\n  data: {},\n  options: {\n    tooltips: {\n      callbacks: {\n        label: (tooltipItem) =\u003e {\n          const data = tooltipItem.chart.data;\n          const datasetIndex = tooltipItem.datasetIndex;\n          const index = tooltipItem.dataIndex;\n          const datasetLabel = data.datasets[datasetIndex].label || \"\";\n          // You can use two type values.\n          // `data.originalData` is raw values,\n          // `data.calculatedData` is percentage values, e.g. 20.5 (The total value is 100.0)\n          const originalValue = data.originalData[datasetIndex][index];\n          const rateValue = data.calculatedData[datasetIndex][index];\n\n          return `${datasetLabel}: ${rateValue}% (raw ${originalValue})`;\n        },\n      },\n    },\n    plugins: {\n      stacked100: { enable: true, replaceTooltipLabel: false },\n    },\n  },\n});\n```\n\n### Specify the precision of the percentage value\n\nYou can pass `precision` option. (default value is `1` )\nFor example, when you pass `{ stacked100: { enable: true, precision: 3 } }`, the result is `0.123%` .\n\n#### Examples\n\n```javascript\nnew Chart(document.getElementById(\"my-chart\"), {\n  type: \"bar\",\n  data: {\n    labels: [\"Foo\", \"Bar\"],\n    datasets: [\n      { label: \"bad\", data: [5, 25], backgroundColor: \"rgba(244, 143, 177, 0.6)\" },\n      { label: \"better\", data: [15, 10], backgroundColor: \"rgba(255, 235, 59, 0.6)\" },\n      { label: \"good\", data: [10, 8], backgroundColor: \"rgba(100, 181, 246, 0.6)\" },\n    ],\n  },\n  options: {\n    indexAxis: \"y\",\n    plugins: {\n      stacked100: { enable: true },\n    },\n  },\n});\n```\n\n#### Datapoints can be Objects\n\n```javascript\n...\n// line or bar charts\ndatasets: [\n  { data: [{ y: 5 }, { y: 25 }] },\n  { data: [{ y: 15 }, { y: 10 }] },\n  { data: [{ y: 10 }, { y: 8 }] }\n]\n\n// horizontalBar charts\ndatasets: [\n  { data: [{ x: 5 }, { x: 25 }] },\n  { data: [{ x: 15 }, { x: 10 }] },\n  { data: [{ x: 10 }, { x: 8 }] }\n]\n...\n```\n\n##### How to use datalabels plugin\n\n```javascript\nnew Chart(document.getElementById(\"my-chart\"), {\n  type: \"bar\",\n  data: {},\n  options: {\n    plugins: {\n      datalabels: {\n        formatter: (_value, context) =\u003e {\n          const data = context.chart.data;\n          const { datasetIndex, dataIndex } = context;\n          return `${data.calculatedData[datasetIndex][dataIndex]}% (${data.originalData[datasetIndex][dataIndex]})`;\n        },\n      },\n      stacked100: { enable: true },\n    },\n  },\n});\n```\n\n### Use with React\n\n```bash\nnpx create-react-app demo-react\ncd demo-react\nnpm install react-chartjs-2 chartjs-plugin-stacked100 --save\n```\n\nThen use it:\n\n```typescript\nimport { Chart, Bar } from \"react-chartjs-2\";\nimport ChartjsPluginStacked100 from \"chartjs-plugin-stacked100\";\n\nChart.register(ChartjsPluginStacked100);\n\nconst ChartData = (props: any) =\u003e {\n  return (\n    \u003c\u003e\n      {\n        \u003cdiv\u003e\n          \u003cBar\n            data={{\n              labels: [\"Foo\", \"Bar\"],\n              datasets: [\n                { label: \"bad\", data: [5, 25], backgroundColor: \"rgba(244, 143, 177, 0.6)\" },\n                { label: \"better\", data: [15, 10], backgroundColor: \"rgba(255, 235, 59, 0.6)\" },\n                { label: \"good\", data: [10, 8], backgroundColor: \"rgba(100, 181, 246, 0.6)\" },\n              ],\n            }}\n            options={{\n              //@ts-ignore\n              indexAxis: \"y\",\n              plugins: {\n                stacked100: { enable: true },\n              },\n            }}\n          /\u003e\n        \u003c/div\u003e\n      }\n    \u003c/\u003e\n  );\n};\nexport default ChartData;\n```\n\nYou can find a working example in [the demo-react folder](./examples/demo-react/)\n\n## Supported chart types\n\n- bar\n- line (via [@HoJSim](https://github.com/HoJSim), thanks!)\n\n## Contributing\n\nPull requests and issues are always welcome.\n\nFor bugs and feature requests, [please create an issue](https://github.com/y-takey/chartjs-plugin-stacked100/issues).\n\n1.  Fork it!\n2.  Create your feature branch: `git checkout -b my-new-feature`\n3.  Commit your changes: `git commit -am 'Add some feature'`\n4.  Push to the branch: `git push origin my-new-feature`\n5.  Submit a pull request!\n\n### Development\n\n- install: `yarn install`\n- start dev server: `yarn start`\n- unit test: `yarn test:watch` or `yarn test`\n- publish the plugin: `npm version (major|minor|patch) \u0026\u0026 npm publish`\n- check: `yarn dev`\n- deploy to github pages: `yarn gh`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fy-takey%2Fchartjs-plugin-stacked100","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fy-takey%2Fchartjs-plugin-stacked100","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fy-takey%2Fchartjs-plugin-stacked100/lists"}