Radial & Point Charts

Relevant source files

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

• example/charts/radar.md
• example/examples.md
• src/config.ts
• src/markdown/index.ts
• example/api.md
• example/charts/external.md

Radial and Point charts within vitepress-plugin-chartjs encompass a variety of multivariate and coordinate-based visualization types, including Radar, Polar Area, Scatter, and Bubble charts. These charts are rendered by converting Markdown code blocks into Vue components that interface with Chart.js.

The plugin employs a Data-First architecture, where all parsing, validation, and data resolution occur at build time. This ensures that the client-side receives pre-computed configurations, eliminating the need for runtime fetching or complex processing.

Sources: src/markdown/index.ts:167-178, README.md:14-17

Architecture and Data Flow

The system processes radial and point charts through a multi-stage pipeline. The markdown plugin identifies chart or chartjs fences and converts them into a custom <VpChart /> component.

Build-Time Resolution Process

The following diagram illustrates the lifecycle of a chart configuration from a markdown file to the rendered output.

The diagram shows how the plugin handles inline YAML/JSON vs. external URL references at build time.
Sources: src/markdown/index.ts:182-260, README.md:213-222

Radial Chart Types

Radial charts utilize a circular scale (the r axis) to represent multivariate data.

Radar Charts

Radar charts display data points on axes starting from a central point. They are commonly used for skill comparisons or multivariate performance metrics.

Dataset Property	Type	Description
label	string	The name of the dataset.
data	number[]	Array of data values for each axis.
fill	boolean	Whether to fill the area under the line.
tension	number	Curve smoothness (0-1).
pointRadius	number	Size of the data points.

Sources: example/charts/radar.md:4-110, example/examples.md:112-138

Polar Area Charts

Similar to pie charts, Polar Area charts divide a circle into segments, but each segment has a different radius based on its value, rather than a different angle.

type: polarArea
data:
  labels: [Red, Green, Yellow, Grey, Blue]
  datasets:
    - data: [11, 16, 7, 3, 14]

Sources: example/examples.md:144-164, example/api.md:129

Point-Based Charts

Point-based charts utilize Cartesian coordinates (x and y) to map individual data observations.

Scatter and Bubble Charts

Scatter charts display individual points, while Bubble charts extend this by adding a radius (r) to represent a third dimension.

The diagram illustrates the data structure required for point-based datasets.
Sources: example/api.md:167-183, src/config.ts:31-48

Configuration Schemas

The plugin uses Zod for strict validation of dataset fields for point and radial charts.

Field	Description	Source
backgroundColor	Fill color for bubbles or radial areas.	src/config.ts:34
pointStyle	Shape of the point (e.g., 'circle', 'triangle', 'rect').	src/config.ts:42
spanGaps	If true, lines connect across null values.	src/config.ts:44
xAxisID / yAxisID	Specific axis IDs for multi-axis charts.	src/config.ts:48

Data Processing Logic

The plugin automatically applies a default color palette if none is specified. For radial charts (Radar and Polar Area), it specifically handles area fills and border colors.

if (config.type === 'radar') {
  return {
    ...dataset,
    borderColor: dataset.borderColor || borderColor,
    backgroundColor: dataset.backgroundColor || color,
  };
} else if (config.type === 'polarArea') {
  const dataLength = Array.isArray(dataset.data) ? dataset.data.length : 0;
  const bgColors = Array.from({ length: dataLength }, (_, i) => colors[i % colors.length]);
  return {
    ...dataset,
    backgroundColor: bgColors,
    borderColor: borderColors,
    borderWidth: (dataset as any).borderWidth ?? 1,
  };
}

Sources: src/markdown/index.ts:125-144, src/config.ts:251-262

External Configuration

For complex radial datasets, configurations can be loaded from external files via the url directive. This is resolved at build time using the resolveUrl helper.

File Type	Resolution Method	Use Case
.yaml / .json	Static Parsing	Pre-defined configurations.
.js / .mjs	Node.js Execution	Dynamic/Computed data generation.

Sources: example/charts/external.md:204-210, src/markdown/index.ts:233-255

Summary

Radial and Point charts in vitepress-plugin-chartjs provide robust options for complex data visualization. By leveraging build-time resolution and Zod-based validation, the system ensures high performance and technical accuracy while allowing developers to use simple YAML syntax or dynamic JavaScript modules to define their charts.