Pattern fill

Pro

Six hatch patterns as SVG <defs>, in the card's colour so they read over any series colour: diagonal, the other diagonal, horizontal, vertical, dots and a cross-hatch. Draw a shape's colour first, then the same shape again with fill={patternFor(index, id)} over it, so series are told apart by pattern as well as colour.

Markdown

Version 5.2.0· other versions

This page is for 5.2.0, the current release. An earlier release’s page is the Markdown that release published, so the docs match the version you have installed (candor-lock.json records it).

Not in the docs of 1.3.0, 1.4.0, 1.5.0, 1.5.1, 1.6.0, 1.7.0, 1.8.0, 1.8.1, 1.9.0, 1.9.1, 2.0.0, 2.1.0, 2.2.0, 2.3.0, 2.4.0, 2.5.0, 2.5.1, 2.6.0, 2.6.1, 2.6.2, 2.7.0, 2.8.0, 2.9.0, 2.10.0, 3.0.0, 4.0.0, 4.0.1, 4.0.2 and 4.1.0: the page came later, or had another name then.

Docs pages weren’t kept for 1.0.0, 1.0.1, 1.1.0, 1.1.1, 1.2.0 and 1.2.1: they are kept from 1.3.0 on, and before that only llms.txt was published.

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/pattern-fill

Brings in: tokens

Usage

TSX · The example above

"use client"

import { BarChart } from "@/components/candor/bar-chart"
import type { Series } from "@/lib/candor/data"

// Patterns show by themselves under the high-contrast theme; `always` shows them here in every theme.
const runs: Series[] = [
  { id: "passed", label: "Passed", values: [212, 148, 96, 74] },
  { id: "failed", label: "Failed", values: [3, 0, 5, 1] },
  { id: "skipped", label: "Skipped", values: [12, 30, 8, null] },
]

export default function Example() {
  return <BarChart className="max-w-xl" title="Tests by repository" subtitle="Patterns always on" categories={["api", "web", "billing", "workers"]} series={runs} patterns="always" />
}

<ChartPatterns>

Prop	Type	Default	Description
id	`string \| undefined`	"cd-pattern"	The prefix of the patterns' ids, unique on the page; pass the same to `patternFor`. Defaults to `cd-pattern`.

Functions

markerIsStroke(index: number)

Whether the nth marker is drawn as lines (the plus and the cross) rather than a filled shape.

patternFor(index: number, prefix = "cd-pattern")

The fill that draws the nth series' pattern, url(#…), for a shape drawn over the series' colour. prefix is the id given to the ChartPatterns in the same document; left out, it is cd-pattern.

markerPath(index: number, x: number, y: number, r: number)

The nth series' marker for a line chart, as a path centred on (x, y) with radius r: a circle, a square, a triangle, a diamond, a plus and a cross, so lines are told apart by their points as well as their colour.

patternStyle(index: number)

The nth pattern as CSS, for a shape drawn in HTML rather than SVG: a backgroundImage (and backgroundSize for the dots) to lay over the series' colour. The same six as ChartPatterns, in the same order. It is for the high-contrast theme only: forced colours drop an HTML background image and colour, so a shape that has to survive them is drawn in SVG with ChartPatterns and patternFor, as ShareBar's are.

useChartPatterns(mode: ChartPatternMode, ref: React.RefObject<Element | null>)

Whether series patterns show for an element: always or never by mode, and with auto while the nearest data-theme above it is hc or the system is in forced colours. Watches both, so switching theme switches the patterns. False until mounted (on the server the default themes need none).

Values

PATTERN_COUNT

How many distinct patterns there are; the seventh series takes the first again.

6

Types

ChartPatternMode: When series patterns show: `auto` under the high-contrast theme (`data-theme="hc"` on an ancestor) and in forced colours, `always` everywhere, `never` not at all. The default themes look the same with `auto` as without patterns.; "auto" | "always" | "never"