> ## Documentation Index
> Fetch the complete documentation index at: https://docs.graphy.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Coordinate systems

A **coordinate system** decides the plane a geom is drawn in. The same [geom](/sdk-next/concepts/geoms) and [scales](/sdk-next/concepts/scales) produce very different charts depending on the coord: a stacked bar is a stacked column in cartesian coordinates, a set of horizontal bars when the axes are flipped, and a pie when the plane is bent into a circle.

Set the coordinate system by piping a `coord.*()` part into the spec. When you don't, the chart is cartesian.

## Cartesian

The standard x–y plane, and the default.

```tsx theme={null}
pipe(
  createSpec({ x: 'month', y: 'revenue' }),
  geom.bar(),
  scale.x(),
  scale.y(),
  coord.cartesian() // optional — this is the default
);
```

## Flip

`coord.flip()` swaps the x and y axes. Its main use is turning vertical columns into horizontal bars — you keep the natural mapping (category on `x`, value on `y`) and the flip lays it on its side.

```tsx theme={null}
pipe(
  createSpec({ x: 'country', y: 'population' }),
  geom.bar(),
  scale.x(),
  scale.y(),
  coord.flip() // horizontal bars
);
```

## Polar

`coord.polar()` bends the plane into a circle — this is how pie, donut, rose and radial charts are made. It takes:

<ParamField path="theta" type="'x' | 'y'" required>
  Which aesthetic maps to the angle. `theta: 'y'` sweeps the *value* around the
  circle (pie/donut); `theta: 'x'` sweeps the *category* around it, with the
  value as radius (rose / coxcomb).
</ParamField>

<ParamField path="innerRadius" type="number" default="0">
  Inner radius as a fraction `0–1`. `0` is a full pie; a value like `0.5` cuts
  out the centre for a donut.
</ParamField>

<ParamField path="startAngle" type="number" default="0">
  Starting angle in degrees.
</ParamField>

A pie chart is a single stacked bar wrapped around `theta: 'y'`:

```tsx theme={null}
pipe(
  createSpec({ x: '', y: 'revenue', color: 'region' }),
  geom.bar({ position: 'stack' }),
  coord.polar({ theta: 'y' }),
  scale.x(),
  scale.y(),
  scale.color.palette()
);
```

Give it an `innerRadius` and it becomes a donut. Map `theta: 'x'` instead and the category sweeps the angle with the value as radius — the basis for radar, rose and radial-bar charts. See [Pie & donut](/sdk-next/graph-types/pie) and [Radar & radial](/sdk-next/graph-types/radial) for worked examples.

## Axis limits

Every coord accepts optional `xLimits` / `yLimits` as `[min, max]` to clip the drawing region. For most charts you'll control the visible range through [scale](/sdk-next/concepts/scales) `domainMin` / `domainMax` instead — limits operate on the coordinate space rather than the data domain.

## Next

* [Chart types](/sdk-next/graph-types/index) — coords combined with geoms and positions
* [Pie & donut](/sdk-next/graph-types/pie) — the `theta: 'y'` polar recipes in full
* [Radar & radial](/sdk-next/graph-types/radial) — the `theta: 'x'` polar family