{"id":13701980,"url":"https://github.com/ciprianciurea/chartjs-plugin-doughnutlabel","last_synced_at":"2025-05-05T04:30:39.297Z","repository":{"id":48084765,"uuid":"134462369","full_name":"ciprianciurea/chartjs-plugin-doughnutlabel","owner":"ciprianciurea","description":"Chart.js plugin for doughnut chart to display text in the center","archived":false,"fork":false,"pushed_at":"2021-08-06T21:08:09.000Z","size":77,"stargazers_count":67,"open_issues_count":13,"forks_count":23,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-23T06:36:26.482Z","etag":null,"topics":["chartjs","chartjs-doughnut","chartjs-plugin","doughnut","doughnut-chart","javascript"],"latest_commit_sha":null,"homepage":"https://ciprianciurea.github.io/chartjs-plugin-doughnutlabel/samples/index.html","language":"JavaScript","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/ciprianciurea.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}},"created_at":"2018-05-22T18:59:59.000Z","updated_at":"2024-10-03T07:58:30.000Z","dependencies_parsed_at":"2022-07-28T23:09:24.672Z","dependency_job_id":null,"html_url":"https://github.com/ciprianciurea/chartjs-plugin-doughnutlabel","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ciprianciurea%2Fchartjs-plugin-doughnutlabel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ciprianciurea%2Fchartjs-plugin-doughnutlabel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ciprianciurea%2Fchartjs-plugin-doughnutlabel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ciprianciurea%2Fchartjs-plugin-doughnutlabel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ciprianciurea","download_url":"https://codeload.github.com/ciprianciurea/chartjs-plugin-doughnutlabel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252288912,"owners_count":21724323,"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-doughnut","chartjs-plugin","doughnut","doughnut-chart","javascript"],"created_at":"2024-08-02T21:00:28.822Z","updated_at":"2025-05-05T04:30:38.982Z","avatar_url":"https://github.com/ciprianciurea.png","language":"JavaScript","funding_links":[],"categories":["Plugins"],"sub_categories":["Features"],"readme":"# Chart.js Doughnut plugin to allow for lines of text in the middle\n\nChart.js plugin module that allows to display multiple lines of text centered in the middle area of the doughnut charts \n\n## Demo\nHave a look at the [Demo page](https://ciprianciurea.github.io/chartjs-plugin-doughnutlabel/samples/index.html).\n\n## Table of contents\n\n- [Installation](#installation)\n- [Usage example](#usage)\n- [Development](#development)\n- [License](#license)\n\n## Installation\n\nInstall through npm:\n```\nnpm install --save chartjs-plugin-doughnutlabel\n```\n\n## Usage \n\n```\nvar myDoughnutChart = new Chart(ctx, {\n  type: 'doughnut',\n  data: data,\n  options: {\n    plugins: {\n      doughnutlabel: {\n        labels: [\n          {\n            text: 'The title',\n            font: {\n              size: '60'\n            }\n          },\n          {\n            text: getTotal,\n            font: {\n              size: '50'\n            },\n            color: 'grey'\n          },\n          {\n            text: '$100.000',\n            font: {\n              size: '30'\n            },\n            color: 'red'\n          },\n          {\n            text: '95%',\n            font: {\n              size: '45'\n            },\n          color: 'green'\n          }\n        ]\n      }\n    }\t\t\n  }\n});\n\nvar getTotal = function(myDoughnutChart) {\n\tvar sum = myDoughnutChart.config.data.datasets[0].data.reduce((a, b) =\u003e a + b, 0);\n\treturn `Total: ${sum}`;\n}\n```\n\n### Usage without a module bundler\nThe plugin can be manually downloaded from the \n[Releases page on GitHub!](https://github.com/ciprianciurea/chartjs-plugin-doughnutlabel/releases)\n```\n\u003cscript src=\"chartjs-plugin-doughnutlabel.js\"\u003e\u003c/script\u003e\n```\nor use the minified version\n```\n\u003cscript src=\"chartjs-plugin-doughnutlabel.min.js\"\u003e\u003c/script\u003e\n```\n\n## Development\n\nYou first need to install node dependencies (requires [Node.js](https://nodejs.org/)):\n\n    \u003e npm install\n\nThe following commands will then be available from the repository root:\n\n    \u003e gulp lint             // perform code linting\n    \u003e gulp build            // build dist files\n    \u003e gulp build --watch    // build and watch for changes\n    \u003e gulp package          // create an archive with dist files and samples\n\n## In Angular\n\nFor an example on how to use this plugin with angular, please check this stackblitz prototype:\n[doughnutlabel plugin in angular](https://stackblitz.com/edit/angular-v9tfg7)\n\n## License\n\n`chartjs-plugin-doughnutlabel` is available under the [MIT license](LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fciprianciurea%2Fchartjs-plugin-doughnutlabel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fciprianciurea%2Fchartjs-plugin-doughnutlabel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fciprianciurea%2Fchartjs-plugin-doughnutlabel/lists"}