A zero-dependency, drop-in SVG spray chart for static baseball sites. Designed to match the BCC dark theme (Barlow Condensed, dark backgrounds, gold/red/blue accents).
-
Copy
spray-chart.jsinto your repo (same directory as your HTML files, or acomponents/folder). -
Add the script tag to any HTML page — just before
</body>:
<script src="spray-chart.js"></script>- Add the element wherever you want a chart:
<spray-chart fence-line="325" fence-center="360" id="spray1"></spray-chart>- Feed it data — either inline JSON or via JavaScript:
<script>
document.getElementById('spray1').data = [
{ distance: 280, hitType: "line_drive", result: "double", spray: 25, pitch: "4-seam", speed: 62 },
{ distance: 100, hitType: "ground_ball",result: "out", spray: -15, pitch: "curve", speed: 54 },
{ distance: 340, hitType: "fly_ball", result: "home_run", spray: 18, pitch: "4-seam", speed: 65 },
{ distance: 155, hitType: "line_drive", result: "single", spray: -38, pitch: "slider", speed: 60 },
];
</script>That's it. No npm, no build step, no React.
| Attribute | Default | Description |
|---|---|---|
fence-line |
325 |
Fence distance (ft) down the foul lines |
fence-center |
360 |
Fence distance (ft) to center field |
data |
[] |
JSON string of hit array (alternative to .data property) |
Each hit object supports these fields:
| Field | Type | Required | Values |
|---|---|---|---|
distance |
number | ✓ | Batted ball distance in feet |
hitType |
string | ✓ | "ground_ball", "line_drive", "fly_ball", "popup" |
result |
string | ✓ | "home_run", "triple", "double", "single", "out" |
spray |
number | ✓ | Spray angle in degrees. Negative = left field, positive = right field, 0 = center. Range roughly ±45°. |
pitch |
string | Pitch type: "4-seam", "2-seam", "curve", "slider", "change", "cutter", etc. |
|
speed |
number | Pitch speed in mph |
If you don't have exact spray angle data, estimate from the fielding zone:
| Zone | Approx spray angle |
|---|---|
| Left field line | -40° to -45° |
| Left field | -25° to -40° |
| Left-center | -10° to -25° |
| Center | -10° to +10° |
| Right-center | +10° to +25° |
| Right field | +25° to +40° |
| Right field line | +40° to +45° |
The component inherits CSS custom properties from your site when available:
--color-carbon(background)--color-steel(borders)--color-graphite(info panel background)--color-mist(legend text)--color-silver(info text)--color-void(chip text)--radius-md(border radius)
Since the BCC site already defines these in :root, the chart automatically picks up the right colors.
Scout pages (scout-gambrill.html, etc.): Add a spray chart per batter in their scouting section, after the existing spray-bar stats. This gives a visual map of tendencies alongside the L/C/R percentages you already show.
Game pages (game1.html, etc.): Add a team-wide spray chart showing all batted balls from the game, color-coded by result.
<!-- After the player's stat table -->
<div class="section">
<div class="section-label">Batted ball locations</div>
<div class="section-title">Spray <span class="gold">Chart</span></div>
<spray-chart fence-line="325" fence-center="360" id="player-spray"></spray-chart>
</div>
<script>
document.getElementById('player-spray').data = [
// Paste player's batted ball data here
];
</script>If you're using an LLM (Claude, ChatGPT, etc.) to generate or update BCC pages, here's how to include spray charts:
The BCC site uses a <spray-chart> web component (loaded via spray-chart.js).
To add a spray chart, include the element and set its .data property.
The component needs:
- fence-line="325" fence-center="360" (BCC field dimensions)
- Each hit: { distance, hitType, result, spray, pitch (optional), speed (optional) }
- hitType: "ground_ball" | "line_drive" | "fly_ball" | "popup"
- result: "home_run" | "triple" | "double" | "single" | "out"
- spray: degrees, negative = left field, positive = right field
It inherits the site's CSS custom properties automatically.
Place it inside a <div class="section"> block with section-label and section-title.
Make sure <script src="spray-chart.js"></script> is included before </body>.
When generating hit data from game notes or box scores:
- Use the fielding position to estimate spray angle (SS area ≈ -15°, 2B area ≈ +15°, etc.)
- Use hit description to set hitType (grounder→ground_ball, liner→line_drive, fly→fly_ball, pop→popup)
- Estimate distance: infield singles ~130ft, outfield singles ~190ft, doubles ~260ft, triples ~330ft, HR ~370ft, groundouts ~110ft, flyouts ~250ft
Input notes:
"Smith grounded out to short. Jones lined a single to left. Williams hit a fly ball HR to right-center."
Generated data:
document.getElementById('game-spray').data = [
{ distance: 110, hitType: "ground_ball", result: "out", spray: -12, pitch: "4-seam", speed: 63 },
{ distance: 185, hitType: "line_drive", result: "single", spray: -30, pitch: "curve", speed: 55 },
{ distance: 375, hitType: "fly_ball", result: "home_run", spray: 15, pitch: "4-seam", speed: 64 },
];