Grid & Axes

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

Markdown

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 as well.

← Sparkline Calendar →

Created by @indokudev