# Grid & Axes

Axes, grid and reference lines are props of every cartesian chart. `CartesianGrid` and `ChartAxis` are exported for custom SVG.

Group: Charts

## Import

```tsx
import { CartesianGrid, ChartAxis } from "@indoku/ui"
```

## Examples

### Custom tick formatting

`yTickFormat` and `xTickFormat`.

```tsx
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
const revenue = [120, 180, 150, 240, 210, 300]
const costs = [80, 110, 100, 150, 140, 170]
const usd = (v: number) => `$${v}k`


const revenue = [120, 180, 150, 240, 210, 300]
const costs = [80, 110, 100, 150, 140, 170]
const usd = (v: number) => `$${v}k`


const usd = (v: number) => `$${v}k`


function GridFormat() {
  return <Box maxW="2xl"><LineChart series={[{ name: "Revenue", values: revenue }]} categories={months} yTickFormat={usd} xTickFormat={(m) => m.toUpperCase()} /></Box>
}
```

### Multiple axes

A right axis for series with `axis: right`.

```tsx
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
const revenue = [120, 180, 150, 240, 210, 300]
const costs = [80, 110, 100, 150, 140, 170]
const usd = (v: number) => `$${v}k`


const revenue = [120, 180, 150, 240, 210, 300]
const costs = [80, 110, 100, 150, 140, 170]
const usd = (v: number) => `$${v}k`


function GridAxes() {
  return <Box maxW="2xl"><LineChart series={[{ name: "Revenue ($k)", values: revenue }, { name: "Margin (%)", values: [30, 38, 33, 41, 36, 44], axis: "right" }]} categories={months} legend rightTickFormat={(v) => v + "%"} /></Box>
}
```

### Reference lines

Horizontal guides with labels.

```tsx
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
const revenue = [120, 180, 150, 240, 210, 300]
const costs = [80, 110, 100, 150, 140, 170]
const usd = (v: number) => `$${v}k`


const revenue = [120, 180, 150, 240, 210, 300]
const costs = [80, 110, 100, 150, 140, 170]
const usd = (v: number) => `$${v}k`


function GridReference() {
  return <Box maxW="2xl"><BarChart series={[{ name: "Revenue", values: revenue }]} categories={months} referenceLines={[{ value: 200, label: "Target" }, { value: 150, label: "Break-even", color: "orange", dashed: false }]} /></Box>
}
```

### No grid or axes

```tsx
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
const revenue = [120, 180, 150, 240, 210, 300]
const costs = [80, 110, 100, 150, 140, 170]
const usd = (v: number) => `$${v}k`


const revenue = [120, 180, 150, 240, 210, 300]
const costs = [80, 110, 100, 150, 140, 170]
const usd = (v: number) => `$${v}k`


function GridNone() {
  return <Box maxW="2xl"><LineChart series={[{ name: "Revenue", values: revenue }]} categories={months} showGrid={false} showAxes={false} height={120} /></Box>
}
```

## Props

### Shared props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `showGrid / showAxes` | `boolean` | `true` | Toggle grid lines and axes. |
| `referenceLines` | `{ value; label?; color?; axis?; dashed? }[]` |  | Guides. |
| `yTickFormat / rightTickFormat` | `(v: number) => string` |  | Y tick labels. |
| `xTickFormat` | `(label: string, i: number) => string` |  | X tick labels. |

`*` = required. Style props and HTML attributes are accepted too.

## See also

- Line Chart: https://ui.indoku.org/docs/line-chart