⚠️ This project is still under development ⚠️
\n\n> 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\n\n\n\n\n\n\n\n\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> **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> **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","readmeFilename":"README.md"}