campos

Football charts for match pages, season summaries, and analysis apps.

Football charts that feel ready to ship.

Use published components, pitch primitives, and data adapters to build match pages, season summaries, and analysis surfaces without re-solving the same UI problems in every app.

View Showcases Get Started
Alpha Real-data examples, docs pages, and adapter-driven demos
Smallest Useful Path
import { ShotMap } from '@withqwerty/campos-react';
import { fromOpta } from '@withqwerty/campos-adapters';

const shots = fromOpta.shots(events, ctx);

<ShotMap shots={shots} />
// Start here, then compose into full match or season pages.
What Campos Is

A football chart library built for real product surfaces.

Campos gives you publishable football charts and pitch primitives that fit normal React work. Use it for match pages, season summaries, reports, and internal tools without rebuilding football-specific UI from scratch.

Charts that ship cleanly

Shot maps, timelines, networks, scatter plots, radars, and ranking charts with sensible defaults instead of bare plotting output.

Style it with callbacks

Express any styling logic as a callback — colour by xG threshold, stroke by outcome, shape by position. Constants and maps work too.

Showcases, not isolated widgets

The site includes full-page examples so the library is judged as a system, not as disconnected components.

Showcases

Start from the battle-tested showcase, not just component docs.

Showcase / Battle Test

Can Campos build this?

Real football visualisations recreated with Campos components. Each entry starts from a published reference and forces the library to prove its layout, styling, and composition seams on one page.

Open the showcase Build your first page
Why It Works

The useful default path is short.

1

Pass your data in

Bring any normalised shot, pass, or event array. Zero-config defaults handle the rest.

2

Style with callbacks

Express visual logic as functions — colour, stroke, shape, opacity — using whatever fields your data has.

3

Compose the page

Use multiple components together on one route instead of treating them as demos only.

For People Who Care About Internals

Package layout

@withqwerty/campos-react is the main library package, with @withqwerty/campos-adapters for provider normalisation, @withqwerty/campos-schema for canonical types, @withqwerty/campos-stadia for pitch and goal primitives, and @withqwerty/campos-static for Node-side export.

Data flow

The intended path is raw provider payloads into adapter products such as ShotEvent[] and PassEvent[], then straight into chart components. Aggregated charts can skip that step and take plain metric rows directly.

Callback-first styling

Style props accept constants, maps, or callbacks. The callback gets the point model and returns the style, so most editorial logic stays in normal TypeScript rather than a chart-specific DSL.

Why compute still lives in React

Compute helpers are still exported from @withqwerty/campos-react during alpha. That keeps the public surface smaller while the chart and model contracts are still being battle-tested.

Export path

Static export is a deliberate two-step surface: build an ExportFrameSpec in React, then render it to SVG or PNG in Node with @withqwerty/campos-static.

What’s Next

More full surfaces, richer style APIs, stronger export paths.

The next pass is about battle-testing complete football pages and landing a first-class callback-based styling system across all components.

See the current pass Track gaps on GitHub 
npm install @withqwerty/campos-react@alpha

The current docs site tracks the alpha release channel, so installs should pin @alpha until Campos moves onto the default npm tag.

npm is the safer first-alpha install path while npm's abbreviated metadata catches up for newer scoped publishes.