{"id":19064818,"url":"https://github.com/decantyme/chartjs-plugin-tailwindcss-colors","last_synced_at":"2025-04-28T11:25:00.261Z","repository":{"id":38172827,"uuid":"482453134","full_name":"decanTyme/chartjs-plugin-tailwindcss-colors","owner":"decanTyme","description":"Use TailwindCSS to colorize your Chart.js components!","archived":false,"fork":false,"pushed_at":"2025-01-07T05:20:46.000Z","size":1256,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-28T11:24:52.039Z","etag":null,"topics":["chartjs","chartjs-plugin","colors","plugin","tailwindcss"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/chartjs-plugin-tailwindcss-colors","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/decanTyme.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","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":"2022-04-17T07:09:03.000Z","updated_at":"2025-01-10T13:37:01.000Z","dependencies_parsed_at":"2024-08-19T11:25:48.944Z","dependency_job_id":"2386921a-d6a9-4eaa-a93c-dd98b8370652","html_url":"https://github.com/decanTyme/chartjs-plugin-tailwindcss-colors","commit_stats":{"total_commits":48,"total_committers":2,"mean_commits":24.0,"dds":0.0625,"last_synced_commit":"24c41d7ea56aa6587b77775d972b10425489441a"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/decanTyme%2Fchartjs-plugin-tailwindcss-colors","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/decanTyme%2Fchartjs-plugin-tailwindcss-colors/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/decanTyme%2Fchartjs-plugin-tailwindcss-colors/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/decanTyme%2Fchartjs-plugin-tailwindcss-colors/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/decanTyme","download_url":"https://codeload.github.com/decanTyme/chartjs-plugin-tailwindcss-colors/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251303545,"owners_count":21567715,"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","colors","plugin","tailwindcss"],"created_at":"2024-11-09T00:47:27.709Z","updated_at":"2025-04-28T11:25:00.236Z","avatar_url":"https://github.com/decanTyme.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# chartjs-plugin-tailwindcss-colors\n\n![yarn current](https://img.shields.io/badge/Yarn-v1-blue)\n![chart.js peer dependency version](https://img.shields.io/npm/dependency-version/chartjs-plugin-tailwindcss-colors/peer/chart.js)\n![tailwindcss peer dependency version](https://img.shields.io/npm/dependency-version/chartjs-plugin-tailwindcss-colors/peer/tailwindcss)\n![npm type definitions](https://img.shields.io/npm/types/chartjs-plugin-tailwindcss-colors)\n[![npm (latest)](https://img.shields.io/npm/v/chartjs-plugin-tailwindcss-colors)](https://www.npmjs.com/package/chartjs-plugin-tailwindcss-colors/v/latest)\n[![CI](https://github.com/decanTyme/chartjs-plugin-tailwindcss-colors/actions/workflows/ci.yml/badge.svg)](https://github.com/decanTyme/chartjs-plugin-tailwindcss-colors/actions/workflows/ci.yml)\n[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg)](https://github.com/decanTyme/chartjs-plugin-tailwindcss-colors/fork)\n\n\u003cp align=\"center\"\u003e⚠️ This project is still under development ⚠️\u003c/p\u003e\n\n\u003e Colorize your [Chart.js](https://www.chartjs.org/) components using [TailwindCSS](https://tailwindcss.com/)!\n\nThis plugin integrates your existing TailwindCSS colors configuration so you can continue to use it on your Chart.js components, without the hassle.\n\n## Getting started\n\n### Installation\n\nPackage:\n\n```shell\nyarn add chartjs-plugin-tailwindcss-colors # or npm install\n```\n\n[CDN](https://www.jsdelivr.com/package/npm/chartjs-plugin-tailwindcss-colors):\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/chart.js@\u003cversion\u003e/dist/chart.umd.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.tailwindcss.com\"\u003e\u003c/script\u003e\n\n\u003c!-- UMD --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/chartjs-plugin-tailwindcss-colors@\u003cversion\u003e/dist/plugin.umd.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  Chart.register(twColorsPlugin(tailwind.config))\n\u003c/script\u003e\n\n\u003c!-- or as an ESM --\u003e\n\u003cscript type=\"module\"\u003e\n  import twColorsPlugin from \"https://cdn.jsdelivr.net/npm/chartjs-plugin-tailwindcss-colors@\u003cversion\u003e/+esm\"\n\u003c/script\u003e\n```\n\n### Integration\n\nSimply include the plugin inside the `plugins` options in your Chart.js instance's config, provide your TailwindCSS config, and give it some [color options](https://www.chartjs.org/docs/latest/general/colors.html):\n\n```js\nimport twColorsPlugin from \"chartjs-plugin-tailwindcss-colors\"\nimport twConfig from \"./tailwind.config\"\n\nconst config = {\n  data: {\n    datasets: [\n      {\n        data: [...],\n        borderColor: \"yellow-500\",\n        backgroundColor: \"yellow-500/50\", // or #eab308/50\n      },\n    ],\n  },\n  plugins: [twColorsPlugin(twConfig)],\n}\n\n// ...\nconst chart = new Chart(ctx, config)\n```\n\nAnd that's about it, you're good to go!\n\n\u003e **NOTE**: Only tested with vanilla JS and `react-chartjs-2` using `chart.js@3` as of initial release. If you encounter problems with other frameworks and versions of Chart.js, please feel free to submit to the [issue tracker](https://github.com/decanTyme/chartjs-plugin-tailwindcss-colors/issues)!\n\n### Parsable Chart Options\n\nIn addition to the above, it can also parse the following color options:\n\n- `color`\n- `hoverBorderColor`\n- `hoverBackgroundColor`\n- `pointBorderColor`\n- `pointBackgroundColor`\n- `pointHoverBackgroundColor`\n- `pointHoverBorderColor`\n- `fill.above`\n- `fill.below`\n\n### Global Defaults\n\nTo set the global colors, you can register it and add defaults:\n\n```js\nChart.register(twColorsPlugin(tailwindConfig))\n\nChart.defaults.borderColor = \"yellow-500\"\nChart.defaults.backgroundColor = \"yellow-500/50\" // or #eab308/50\n```\n\nNow if a chart's parsable option is not configured, it will fallback to the values provided above.\n\n\u003e **NOTE**: Since this plugin is still on its initial release, there might be other overlooked color options left to be parsed (also, bugs). As such, feedback is highly encouraged!\n\n## Why did I even make this?\n\nI absolutely _love_ how fast I can prototype things with TailwindCSS. However, keeping my Chart.js component's colors consistent with my TailwindCSS config has been pretty much a hassle, to say the least. While you can just use TailwindCSS's `resolveConfig` [helper function](https://tailwindcss.com/docs/configuration#referencing-in-java-script), it is far more intuitive and convenient to just use TailwindCSS color classes directly rather than something like `fullConfig.theme.colors.red[500]`. What's more, it doesn't even handle opacity, which is something I use all the time.\n\nThat's why this plugin was made in order to seamlessly blend Chart.js's color options with my TailwindCSS workflow. Now I'm sharing this with all of you!\n\n## Contributing\n\nFor making feature requests and other related information, please refer to the [contributing guidelines](CONTRIBUTING.md). This project is tested with BrowserStack.\n\n## License\n\n`chartjs-plugin-tailwindcss-colors` is available under the [MIT license](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdecantyme%2Fchartjs-plugin-tailwindcss-colors","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdecantyme%2Fchartjs-plugin-tailwindcss-colors","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdecantyme%2Fchartjs-plugin-tailwindcss-colors/lists"}