https://github.com/decantyme/chartjs-plugin-tailwindcss-colors
Use TailwindCSS to colorize your Chart.js components!
https://github.com/decantyme/chartjs-plugin-tailwindcss-colors
chartjs chartjs-plugin colors plugin tailwindcss
Last synced: 10 months ago
JSON representation
Use TailwindCSS to colorize your Chart.js components!
- Host: GitHub
- URL: https://github.com/decantyme/chartjs-plugin-tailwindcss-colors
- Owner: decanTyme
- License: mit
- Created: 2022-04-17T07:09:03.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2025-01-07T05:20:46.000Z (about 1 year ago)
- Last Synced: 2025-04-28T11:24:52.039Z (10 months ago)
- Topics: chartjs, chartjs-plugin, colors, plugin, tailwindcss
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/chartjs-plugin-tailwindcss-colors
- Size: 1.2 MB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# chartjs-plugin-tailwindcss-colors
[](https://www.npmjs.com/package/chartjs-plugin-tailwindcss-colors/v/latest)
[](https://github.com/decanTyme/chartjs-plugin-tailwindcss-colors/actions/workflows/ci.yml)
[](https://github.com/decanTyme/chartjs-plugin-tailwindcss-colors/fork)
⚠️ This project is still under development ⚠️
> Colorize your [Chart.js](https://www.chartjs.org/) components using [TailwindCSS](https://tailwindcss.com/)!
This plugin integrates your existing TailwindCSS colors configuration so you can continue to use it on your Chart.js components, without the hassle.
## Getting started
### Installation
Package:
```shell
yarn add chartjs-plugin-tailwindcss-colors # or npm install
```
[CDN](https://www.jsdelivr.com/package/npm/chartjs-plugin-tailwindcss-colors):
```html
Chart.register(twColorsPlugin(tailwind.config))
import twColorsPlugin from "https://cdn.jsdelivr.net/npm/chartjs-plugin-tailwindcss-colors@<version>/+esm"
```
### Integration
Simply 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):
```js
import twColorsPlugin from "chartjs-plugin-tailwindcss-colors"
import twConfig from "./tailwind.config"
const config = {
data: {
datasets: [
{
data: [...],
borderColor: "yellow-500",
backgroundColor: "yellow-500/50", // or #eab308/50
},
],
},
plugins: [twColorsPlugin(twConfig)],
}
// ...
const chart = new Chart(ctx, config)
```
And that's about it, you're good to go!
> **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)!
### Parsable Chart Options
In addition to the above, it can also parse the following color options:
- `color`
- `hoverBorderColor`
- `hoverBackgroundColor`
- `pointBorderColor`
- `pointBackgroundColor`
- `pointHoverBackgroundColor`
- `pointHoverBorderColor`
- `fill.above`
- `fill.below`
### Global Defaults
To set the global colors, you can register it and add defaults:
```js
Chart.register(twColorsPlugin(tailwindConfig))
Chart.defaults.borderColor = "yellow-500"
Chart.defaults.backgroundColor = "yellow-500/50" // or #eab308/50
```
Now if a chart's parsable option is not configured, it will fallback to the values provided above.
> **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!
## Why did I even make this?
I 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.
That'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!
## Contributing
For making feature requests and other related information, please refer to the [contributing guidelines](CONTRIBUTING.md). This project is tested with BrowserStack.
## License
`chartjs-plugin-tailwindcss-colors` is available under the [MIT license](LICENSE).