Fetch the overs
The overs endpoint returns one row per over with runs, wickets and the ball codes. Use the Developer plan key in the Authorization header.
const res = await fetch(
"https://opencricketapi.com/v1/matches/match_cs_1512773/overs",
{ headers: { Authorization: `Bearer ${process.env.OPENCRICKET_KEY}` } }
);
const { data } = await res.json();
const firstInnings = data[0].overs; // [{ over: 1, runs: 6, wickets: 0, balls: [...] }, ...]Draw the Manhattan
Scale each bar to the highest over in the match, and mark wickets with a dot on top of the bar.
const max = Math.max(...firstInnings.map((o) => o.runs));
const bars = firstInnings.map((o, i) =>
`<rect x="${i * 12}" y="${100 - (o.runs / max) * 100}" width="10" height="${(o.runs / max) * 100}" />`
);
svg.innerHTML = bars.join("");Draw the worm
Accumulate the runs and plot one point per over. Draw both innings on the same axes to see where a chase went right or wrong.
let total = 0;
const points = firstInnings.map((o, i) => {
total += o.runs;
return `${(i + 1) * 12},${200 - total * 0.7}`;
});
polyline.setAttribute("points", points.join(" "));Frequently asked questions
Sources and further reading
Product descriptions and examples were checked against the OpenCricketAPI v1 contract on 5 October 2026.