Automated Colors & Schemes

Relevant source files

The following files were used as context for generating this wiki page:

• example/plugins/autocolors.md
• example/plugins/colorschemes.md
• src/markdown/index.ts
• src/config.ts
• example/api.md
• example/plugins/setup.md

Automated Colors & Schemes in vitepress-plugin-chartjs provide developers with robust mechanisms to manage chart aesthetics without manual color assignments for every dataset. This system encompasses built-in default palettes, dark mode adaptations, and integration with specialized Chart.js plugins like chartjs-plugin-autocolors and hw-chartjs-plugin-colorschemes.

The system operates primarily at build-time within the Markdown parser to apply default palettes, while allowing client-side plugins to take over for dynamic color generation or predefined professional schemes (e.g., ColorBrewer, Tableau).

Core Architecture and Data Flow

The color management logic is divided between build-time processing in the Markdown-it plugin and runtime execution via registered Chart.js plugins. During the build phase, the plugin applies default colors if none are provided in the YAML/JSON configuration.

The flow above illustrates how build-time defaults act as a fallback before client-side plugins apply more advanced logic.
Sources: src/markdown/index.ts:114-166, src/config.ts:251-274

Internal Default Palettes

The plugin maintains two primary hardcoded palettes used during the applyDefaultColors phase: DEFAULT_COLORS for light mode and DEFAULT_DARK_COLORS for dark mode.

Palette Name	Purpose	Example Colors
DEFAULT_COLORS	Standard build-time fallback	rgba(54, 162, 235, 0.8) (Blue), rgba(255, 99, 132, 0.8) (Red)
DEFAULT_DARK_COLORS	Dark mode fallback	rgba(100, 181, 246, 0.8) (Light Blue), rgba(239, 83, 80, 0.8) (Light Red)

Sources: src/config.ts:251-274, example/api.md:46-52

Build-Time Color Application

The function applyDefaultColors iterates through datasets and assigns colors based on the chart type. It intelligently handles different Chart.js structures, such as single colors for lines/bars or arrays of colors for pie/doughnut charts.

Type-Specific Logic

• Line/Radar: Sets borderColor to the solid version (alpha 1) of the palette color and backgroundColor to the transparent version.
• Bar: Applies backgroundColor and sets a default borderWidth of 1.
• Pie/Doughnut/PolarArea: Generates an array of colors matching the length of the data array, ensuring each segment has a unique color from the palette.

Sources: src/markdown/index.ts:114-154

Plugin: Auto Colors

The chartjs-plugin-autocolors is an external dependency that can be registered to automate color generation dynamically on the client. It supports different modes to determine how colors are assigned.

Configuration Modes

The plugin's behavior is governed by the mode option:

Mode	Assignment Logic	Recommended For
dataset	One color per dataset	Bar, Line, Radar
data	One color per data point	Pie, Doughnut, Polar Area
label	Same color for identical labels	Grouped comparisons

Sources: example/plugins/autocolors.md:144-150

Usage Example

options:
  plugins:
    autocolors:
      mode: data
      offset: 5

Sources: example/plugins/autocolors.md:52-60

Plugin: Color Schemes

The hw-chartjs-plugin-colorschemes provides access to numerous professional color palettes. Once registered in the theme, it is activated via the plugins.colorschemes configuration block.

Predefined schemes are categorized by their visual intent, such as Sequential for ranges or Qualitative for distinct categories.
Sources: example/plugins/colorschemes.md:147-167

Key Options

Option	Type	Default	Description
scheme	string/array	'brewer.Paired12'	Palette name or custom hex array
fillAlpha	number	0.5	Transparency (0.0 - 1.0)
reverse	boolean	false	Reverses the color sequence
override	boolean	false	Force replacement of existing colors

Sources: example/plugins/colorschemes.md:135-141

Global Configuration

Developers can define global color palettes in the VitePress configuration to override the built-in defaults across all charts.

// .vitepress/config.mts
export default withChartjs(defineConfig({
  chartjs: {
    colorPalette: ['#3b82f6', '#ef4444', '#22c55e'],
    darkColorPalette: ['#60a5fa', '#f87171', '#4ade80'],
    autoDarkMode: true
  }
}))

Sources: example/api.md:65-73, src/config.ts:193-210

Summary

The Automated Colors & Schemes system provides a multi-layered approach to chart styling. By default, the plugin applies sensible palettes at build-time (src/markdown/index.ts). For more complex requirements, it allows seamless integration with specialized plugins like autocolors for dynamic generation or colorschemes for industry-standard palettes like ColorBrewer and Tableau. This ensures that charts remain visually consistent and professional with minimal configuration effort.