Coordinate Systems

vccs uses different coordinate systems for different purposes. Understanding them helps when placing annotations, custom elements, or interpreting event data.

Domain coordinates

Domain coordinates are your data values. When you set domain={[0, 100]} on a YAxis, you're working in domain coordinates. Components like <ReferenceLine> accept domain coordinates:

<!-- Draw a horizontal line at y=75 in data space -->
<ReferenceLine :y="75" stroke="#ef4444" stroke-dasharray="3 3" />

<!-- Draw a vertical line at a specific category -->
<ReferenceLine x="March" stroke="#14b8a6" />

Pixel coordinates

Pixel coordinates are relative to the chart's drawing area. The top-left corner of the chart area (inside margins) is (0, 0). These are used internally for positioning and by <ReferenceArea>:

<ReferenceArea :x1="'Feb'" :x2="'Apr'" fill="#f97316" :fill-opacity="0.1" />

Cartesian vs Polar

Cartesian charts (BarChart, LineChart, AreaChart, ScatterChart, ComposedChart) use X/Y axes with rectangular coordinate grids.

Polar charts (PieChart, RadarChart, RadialBarChart) use angle/radius with circular coordinate systems:

• <PolarAngleAxis> — maps data to angles around the circle
• <PolarRadiusAxis> — maps data to distance from center
• <PolarGrid> — renders circular or polygon grid lines

<RadarChart :data="data" :cx="'50%'" :cy="'50%'">
  <PolarGrid />
  <PolarAngleAxis data-key="subject" />
  <PolarRadiusAxis />
  <Radar data-key="score" stroke="#f97316" fill="#f97316" :fill-opacity="0.5" />
</RadarChart>

Annotations with ReferenceArea and ReferenceLine

Use these components to annotate charts with domain coordinates: