{"id":13701992,"url":"https://github.com/yunusemrejs/chartjs-image-label","last_synced_at":"2025-05-05T04:30:38.401Z","repository":{"id":202935122,"uuid":"708462418","full_name":"yunusemrejs/chartjs-image-label","owner":"yunusemrejs","description":"An chartjs plugin to add image labels to doughnut charts","archived":false,"fork":false,"pushed_at":"2024-03-18T09:46:20.000Z","size":59,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-27T08:50:27.142Z","etag":null,"topics":["chartjs","chartjs-plugin"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/chartjs-plugin-image-label","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/yunusemrejs.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}},"created_at":"2023-10-22T16:27:26.000Z","updated_at":"2024-04-19T12:01:07.000Z","dependencies_parsed_at":null,"dependency_job_id":"d40e81ec-409e-4966-a328-bf0e20fef468","html_url":"https://github.com/yunusemrejs/chartjs-image-label","commit_stats":null,"previous_names":["yunusemrejs/chartjs-image-label"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yunusemrejs%2Fchartjs-image-label","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yunusemrejs%2Fchartjs-image-label/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yunusemrejs%2Fchartjs-image-label/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yunusemrejs%2Fchartjs-image-label/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yunusemrejs","download_url":"https://codeload.github.com/yunusemrejs/chartjs-image-label/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252439365,"owners_count":21747993,"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"],"created_at":"2024-08-02T21:00:29.130Z","updated_at":"2025-05-05T04:30:38.088Z","avatar_url":"https://github.com/yunusemrejs.png","language":"TypeScript","funding_links":[],"categories":["Plugins"],"sub_categories":["Features"],"readme":"# Chart.js Image Label Plugin\n\nThe **Chart.js Image Label Plugin** is an extension for [Chart.js](https://www.chartjs.org/) that allows you to add images as labels to a Doughnut chart. This plugin enables you to enhance your charts with images, making the visualization more engaging and informative.\n\nWhat it looks like:\n\n![image](https://github.com/yunusemrejs/chartjs-image-label/assets/53190543/73f37ece-d612-44c0-bb78-0527025f7c3e)\n\n\n## Installation\n\nYou can install the Chart.js Image Label Plugin using npm or yarn:\n\n```bash\nnpm install chartjs-plugin-image-label\n```\n\n## Usage\n\nTo use this plugin, follow these steps:\n\n- Include the plugin in your Chart.js setup.\n    \n```javascript\nimport { Chart } from 'chart.js';\nimport ChartPluginImageLabel from 'chartjs-plugin-image-label';\nconst ctx = document.getElementById('myDoughnutChart');\n\nnew Chart(ctx, {\n  // other chart configuration\n  plugins: [ChartPluginImageLabel]\n})\n```\n\n- Create your Doughnut chart and configure it with image labels:\n\n```javascript\nconst ctx = document.getElementById('myDoughnutChart');\n\nconst data = {\n  labels: ['Label 1', 'Label 2', 'Label 3'],\n  datasets: [\n    {\n      data: [30, 40, 30],\n      backgroundColor: ['red', 'blue', 'green'],\n    },\n  ],\n};\n\nnew Chart(ctx, {\n  type: 'doughnut',\n  data: data,\n  options: {\n    plugins: {\n      imageLabel: {\n        verticalAlign: 'middle',\n        horizontalAlign: 'middle',\n        offset: 10,\n        imagesList: [{\n          imageUrl: 'https://picsum.photos/40',\n          imageWidth: 40,\n          imageHeight: 40\n        },\n        {\n          imageUrl: 'https://picsum.photos/40',\n          imageWidth: 40,\n          imageHeight: 40\n        },\n        {\n          imageUrl: 'https://picsum.photos/40',\n          imageWidth: 40,\n          imageHeight: 40\n        }]\n      }\n    }\n  },\n});\n```\n\n## Configuration\n\nThe plugin supports the following configuration options:\n\n| Option             | Values                           | Description                                                                                               |\n| ------------------ | --------------------------------- | --------------------------------------------------------------------------------------------------------- |\n| `verticalAlign`    | `top`, `middle`, `bottom`               | Specifies the vertical alignment of the image label within the chart slice.                             |\n| `horizontalAlign`  | `start`, `middle`, `end`                | Specifies the horizontal alignment of the image label within the chart slice.                            |\n| `offset`  | `Number`              | Horizontal offset between slices                         |\n| `imagesList`       | Array of objects                  | An array of objects that define the images to be used as labels.                                         |\n\n### `imagesList` Object Structure\n\nEach object in the `imagesList` array should have the following structure:\n\n| Property           | Type           | Description                                       |\n| ------------------ | --------------- | ------------------------------------------------- |\n| `imageUrl`         | `String`         | The URL of the image to be used as a label.       |\n| `imageWidth`       | `Number`         | The width of the image in pixels.                 |\n| `imageHeight`      | `Number`         | The height of the image in pixels.                |\n\n\n## License\n[MIT](http://opensource.org/licenses/MIT)\n\nCopyright (c) 2023-present Yunus Emre Kara\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyunusemrejs%2Fchartjs-image-label","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyunusemrejs%2Fchartjs-image-label","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyunusemrejs%2Fchartjs-image-label/lists"}