Standard Charts

Relevant source files

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

• example/charts/line.md
• example/examples.md
• src/config.ts
• src/markdown/index.ts
• README.md
• example/api.md

Standard Charts represent the core set of data visualization types provided by the vitepress-plugin-chartjs integration. These charts leverage the underlying Chart.js library to render common visualizations such as Line, Bar, Pie, Doughnut, Radar, Polar Area, Scatter, and Bubble charts directly from Markdown code blocks.

The system utilizes a data-first architecture where chart configurations, defined in YAML or JSON, are parsed and validated at build time. This ensures that the client-side Vue component receives pre-computed, static data, resulting in faster page loads and improved performance.

Sources: README.md:10-18, src/markdown/index.ts:161-169

Core Architecture and Data Flow

The lifecycle of a standard chart involves three distinct phases: build-time parsing, data resolution, and client-side rendering. The withChartjs() wrapper facilitates this by injecting a custom Markdown-it plugin that intercepts chart or chartjs code blocks.

The diagram above illustrates the transition of chart configuration from raw Markdown text to a rendered interactive chart in the browser.
Sources: src/markdown/index.ts:161-177, README.md:144-150

Build-Time Resolution

All standard charts undergo build-time processing in src/markdown/index.ts. This includes:

• Parsing: Converting YAML or JSON content from the code block into a JavaScript object.
• Validation: Checking the object against ChartConfigSchema using Zod.
• Default Application: Merging user config with DEFAULT_OPTIONS (e.g., responsive: true) and applying the colorPalette.

Sources: src/markdown/index.ts:179-225, src/config.ts:110-120

Common Chart Types

The plugin supports all standard Chart.js types. Each type requires a type string and a data object containing labels and datasets.

Type	Description	Key Configuration Properties
line	Displays data points connected by lines.	tension, fill, pointStyle
bar	Vertical or horizontal bars for comparison.	indexAxis: y (for horizontal), stacked
pie / doughnut	Proportional data segments in a circle.	cutout (for doughnut)
radar	Two-dimensional chart of three or more quantitative variables.	scales: r
scatter	Displays values for typically two variables for a set of data.	data: [{x, y}]
bubble	Similar to scatter but adds a third dimension (radius).	data: [{x, y, r}]

Sources: example/api.md:104-123, example/examples.md:5-200

Configuration Schema

The ChartConfig data structure is strictly defined to ensure compatibility.

This class diagram represents the hierarchy of data structures used to configure a standard chart.
Sources: src/config.ts:89-106

Dataset and Option Styling

Standard charts allow for granular control over aesthetics. The applyDefaultColors function automatically assigns colors from the colorPalette if backgroundColor or borderColor are omitted by the user.

Line and Area Charts

Line charts are defined by the line type. Area charts are created by setting fill: true within a line chart dataset.

type: line
data:
  labels: [Jan, Feb, Mar]
  datasets:
    - label: Users
      data: [1000, 2500, 5000]
      fill: true
      tension: 0.4

Sources: example/charts/line.md:65-75, src/markdown/index.ts:108-115

Mixed and Multi-Axis Charts

The system supports complex layouts such as mixed charts (combining bar and line) and multi-axis charts by specifying yAxisID on datasets and defining corresponding IDs in options.scales.

The sequence shows how multiple datasets are mapped to different axes during the rendering process.
Sources: example/examples.md:275-300, src/config.ts:36-40

Global Configuration Options

Plugin-level defaults can be set in the VitePress configuration to control the behavior of all standard charts.

Option	Type	Default	Description
defaultHeight	string	'400px'	The default vertical size of the chart container.
colorPalette	string[]	DEFAULT_COLORS	An array of RGBA strings used for auto-coloring.
responsive	boolean	true	Whether the chart should resize with the container.

Sources: example/api.md:46-60, src/config.ts:145-165, src/markdown/index.ts:79-82

Summary

Standard Charts in vitepress-plugin-chartjs provide a streamlined way to embed data visualizations into documentation. By performing heavy lifting (parsing, validation, and style application) at build time, the plugin ensures high performance while maintaining a flexible, developer-friendly YAML syntax. Every chart type from the core Chart.js library is accessible via standard Markdown fences, supporting both simple datasets and complex multi-axis configurations.