@pitchkit/core

The zero-dependency, framework-agnostic engine behind PitchKit: pitch dimensions, coordinate transforms, the scene/layer model, geometry algorithms, heatmap binning, and the maths behind its non-pitch charts.

Docs: pitchkitjs.com

Most people want @pitchkit/react instead. That's the supported rendering surface. This package is the maths underneath it — useful directly if you're computing pitch geometry outside React, or building bindings for another framework.

Early days — pre-1.0. The API isn't stable yet.

Install

npm install @pitchkit/core

Zero runtime dependencies. ESM, tree-shakeable, ships its own types.

What's inside

Pitch dimensions — statsbomb, opta, uefa, skillcorner, wyscout, metrica and impect, each in the provider's real coordinate space, sourced from mplsoccer's published constants so real event data aligns exactly.

import { getPitchDimensions, cropForHalf } from "@pitchkit/core";

const dimensions = getPitchDimensions("statsbomb"); // 120 × 80, markings included
const half = cropForHalf(dimensions); // crop window for the attacking half

Coordinate transforms — map provider coordinates to pixels, with orientation, padding and cropping handled for you.

import { createPixelTransform } from "@pitchkit/core";

const transform = createPixelTransform({ dimensions, viewport, orientation: "vertical" });

createStandardizeTransform() converts between providers' coordinate spaces.

Geometry — computeConvexHull, computeVoronoiCells, computeGoalAngle, computeFlowBins, computePolygonCentroid, plus arc/arrow/comet path maths.

Density — computeHeatmapBins (uniform grid), computePositionalBins (Juego de Posición zones), computeHexBins (hexagonal lattice) and computeKdeGrid (Gaussian KDE) for binning (count or weighted), createColorScale for a dependency-free colour ramp, and renderDensityLayersToCanvas for painting to a devicePixelRatio-aware canvas.

Chart maths — the numbers behind <RaceChart>, <MomentumChart>, <RadarChart> and <PizzaChart>, none of which touch a pitch: createLinearScale and niceTicks, computeCumulativeSeries and stepPath, computeMomentumBars, and the polar helpers axisAngle, polarPoint, wedgeAngles and annularSectorPath.

Theming — pitchTokens (CSS variable names, for autocomplete) and partStyle.

Note on the SVG renderer

svgRenderer / renderSceneToSVGElement are exported but internal — they exist to support this repo's own dev harness, not as a supported vanilla-JS consumption path, and new mark types are not added to them. Use @pitchkit/react to render. (Canvas heatmap rendering is unaffected — @pitchkit/react's <Heatmap> calls straight into it.)

Install

What's inside

Note on the SVG renderer

Links

Licence

Interfaces

Type Aliases

Variables

Functions

On this page