Football visualised for the web.

PitchKit is one. It renders football (soccer) pitches and the data plotted on them as ordinary React components — <Pitch> with layers like <Scatter>, <Arrows>, <Comet>, <Heatmap> and <Voronoi> declared as its children. There is no imperative drawing API and no canvas to manage: you compose marks in JSX the way you compose anything else in a React tree, and the pitch re-renders when your data changes.

PitchKit is a charting library built specifically for football data. Heatmaps, hexbins, KDE surfaces, convex hulls, Voronoi control zones and goal-angle wedges ship as layers, and shot maps and pass networks are made by composing them, with pitch markings, aspect ratio and coordinate handling already correct — so you plot events in their own coordinates rather than mapping them onto a generic set of axes first. It also ships the football charts that have no pitch — an xG race chart, a match momentum chart, a player radar and a player pizza — plus a goal-mouth view of where shots crossed the line, and for anything else non-spatial it composes happily alongside whichever general-purpose charting library you already use.

PitchKit is written in TypeScript and ships its own types, so there is no @types package to install. Accessors are generic over your row type, so <Scatter data={shots} x={(s) => s.x} /> infers the element type from the array you pass and your editor autocompletes the fields. The data loaders are typed to each provider's real schema, so a mistyped event field is a compile error rather than an empty pitch.

Yes — it is built for the browser. It works in any React application, including Next.js with server-side rendering, and pitches are responsive by default: each one fills its container via ResizeObserver with a correct-aspect-ratio first paint, so it behaves inside a dashboard, a match report or a scouting tool without fixed sizing. Theming is CSS variables, so it inherits your application's design tokens and dark mode instead of bringing its own.

mplsoccer is the reference football visualisation library for Python and matplotlib, and PitchKit covers the same ground for the web. The concepts map closely — pitches, marks, accessors — so a shot map you know how to build in mplsoccer has a direct PitchKit equivalent. The difference is the target: mplsoccer renders figures for Python analysis and publication, PitchKit renders interactive DOM for shipping inside a web application. Pick whichever matches where the chart needs to end up. The migration guide translates each mplsoccer call to its PitchKit equivalent.

StatsBomb, SkillCorner, Wyscout, Opta and UEFA coordinate systems are handled natively — feed data in its own units and one transform pipeline keeps everything aligned. @pitchkit/data-providers goes further and fetches it for you: the StatsBomb module loads typed open-data events ready to plot, including 360 freeze frames; the SkillCorner module streams broadcast tracking, dynamic events and phases of play; and the Wyscout module reads the Pappalardo et al. open dataset's 1,941 matches.