Matchup Matrix
Counterpicks: champion-vs-champion heat matrix with tooltips, pick your champion, a list on phones. Pro · Games › Meta and tier lists
Counters at a glance: every champion against every other as a heat map — green favours the row, red the column, hatching marks thin samples — with a tooltip per cell. Pick your champion to mark its row and read its best and worst matchups; on a narrow screen the grid becomes a list of its matchups. The grid is read cell by cell with the arrow keys, and the focused or hovered matchup is spelled out under it.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add matchup-matrixnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { MatchupMatrix } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
champions * | MatchupChampion[] | Champions, in the order of the rows. | |
matchups * | Matchup[] | Win rates of row champions against column champions; a missing pairing is read from its mirror. | |
opponents | string[] | Ids of the column champions. Default: every champion. | |
roles | GameRole[] | Roles of the champions: portrait fallbacks take their colour. | |
selected | string | Id of the reader's champion: its row is marked, the summary and the narrow-screen list are about it. | |
defaultSelected | string | Initial champion when uncontrolled. Default: the first. | |
onSelectedChange | (id: string) => void | Called when the reader picks a champion. | |
minGames | number | 50 | Fewer games than this: hatched and marked. Default 50. |
spread | number | 0.08 | Win-rate distance from 50% that gets the full colour. Default 0.08. |
showOverall | boolean | true | Adds the win rate against the field, weighted by share. Default true. |
onCellClick | (champion: MatchupChampion, opponent: MatchupChampion, cell: MatchupCell | undefined) => void | Called when a cell is clicked or Enter is pressed on it. | |
title | ReactNode | Heading. Default: labels.title. | |
subtitle | ReactNode | Line under the heading: patch, rank, sample. | |
headingLevel | 2 | 3 | 4 | 5 | 3 | Level of the heading (default 3). |
locale | string | BCP 47 locale for numbers; defaults to the ThemeProvider's. | |
labels | Partial<MatchupMatrixLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Related components
- Tier List — S+…D tier list: portraits with role badges, role filter, drag with mouse, touch or keyboard, export
- Meta Table — Meta table: tier, win, pick and ban rates with patch-over-patch change, role and rank filters, virtualized
- Tournament Bracket — Tournament bracket: single and double elimination, series scores, winner, team path, monograms
- Patch Notes — Patch notes: champions and items with ability icons, before → after, buffs, nerfs and changes, filters
Previous: Meta Table · Next: Tournament Bracket · All Games