Color Schemes
The hw-chartjs-plugin-colorschemes provides predefined color schemes for Chart.js based on popular tools like ColorBrewer, Microsoft Office, and Tableau.
Registration
Add to .vitepress/theme/index.ts:
typescript
import DefaultTheme from 'vitepress/theme'
export default {
extends: DefaultTheme,
async enhanceApp({ app }) {
if (typeof window !== 'undefined') {
const { Chart, registerables } = await import('chart.js')
Chart.register(...registerables)
// This plugin self-registers
await import('hw-chartjs-plugin-colorschemes')
}
}
}Installation
bash
npm install hw-chartjs-plugin-colorschemesBasic Usage
Specify a color scheme using the scheme option:
Loading chart...
Code:
yaml
```chart
type: bar
data:
labels: [January, February, March, April, May, June]
datasets:
- label: Dataset 1
data: [65, 59, 80, 81, 56, 55]
- label: Dataset 2
data: [45, 79, 60, 91, 76, 85]
- label: Dataset 3
data: [35, 49, 70, 71, 46, 65]
options:
plugins:
colorschemes:
scheme: brewer.Paired12
```Office Schemes
Microsoft Office color schemes:
Loading chart...
Code:
yaml
```chart
options:
plugins:
colorschemes:
scheme: office.Excel16
```Tableau Schemes
Tableau visualization color schemes:
Loading chart...
Code:
yaml
```chart
options:
plugins:
colorschemes:
scheme: tableau.Tableau10
```Reversed Colors
Reverse the order of colors in a scheme:
Loading chart...
Code:
yaml
```chart
options:
plugins:
colorschemes:
scheme: brewer.Blues6
reverse: true
```Fill Alpha
Control the transparency of fill colors:
Loading chart...
Code:
yaml
```chart
options:
plugins:
colorschemes:
scheme: brewer.Set1_3
fillAlpha: 0.3
```Polar Area with Scheme
Loading chart...
Code:
yaml
```chart
type: polarArea
options:
plugins:
colorschemes:
scheme: brewer.Spectral5
```Radar Chart
Loading chart...
Code:
yaml
```chart
type: radar
options:
plugins:
colorschemes:
scheme: brewer.Dark2_3
fillAlpha: 0.2
```Configuration Options
| Option | Type | Default | Description |
|---|---|---|---|
scheme | string/array | 'brewer.Paired12' | Color scheme name or array of colors |
fillAlpha | number | 0.5 | Fill transparency (0.0 - 1.0) |
reverse | boolean | false | Reverse color order |
override | boolean | false | Override existing color settings |
Popular Color Schemes
ColorBrewer Schemes
| Category | Schemes |
|---|---|
| Sequential | brewer.Blues, brewer.Greens, brewer.Oranges, brewer.Reds, brewer.Purples |
| Diverging | brewer.Spectral, brewer.RdYlGn, brewer.RdYlBu, brewer.BrBG |
| Qualitative | brewer.Paired12, brewer.Set1_9, brewer.Set2_8, brewer.Set3_12, brewer.Dark2_8 |
Office Schemes
| Scheme | Description |
|---|---|
office.Excel16 | Excel 2016 default colors |
office.Office6 | Office standard 6 colors |
office.Aspect6 | Aspect theme colors |
Tableau Schemes
| Scheme | Description |
|---|---|
tableau.Tableau10 | Tableau 10 default colors |
tableau.Tableau20 | Extended 20 colors |
tableau.ColorBlind10 | Color blind friendly |
Custom Color Array
You can also provide a custom array of colors:
yaml
options:
plugins:
colorschemes:
scheme:
- '#FF6384'
- '#36A2EB'
- '#FFCE56'
- '#4BC0C0'
- '#9966FF'Override Existing Colors
Use override: true to replace colors even if they're already defined:
yaml
options:
plugins:
colorschemes:
scheme: tableau.Tableau10
override: true