Peer Comparison Bars

A relative-value table dressed as a bar chart — peers ranked on one metric with the focus ticker visually emphasized.

What this chart shows

Pure HTML/CSS (no Chart.js needed). Each row is a horizontal bar where width scales with the metric value. The focus ticker's row uses the accent color so the reader's eye lands on it last, after they've absorbed the peer set.

When to use

• "Cheaper than peers" sections in vivid recipes
• Pair with a right-side aside (e.g. YTD return) for two-axis storytelling
• NOT for: more than ~6 peers — bars compress, story dilutes

How agents use this

data = {
  metric_label: "Fwd P/E",
  focus_ticker: "AAPL",
  rows: [
    { ticker: "NVDA",  value: 35, value_label: "35x", aside: "+24% YTD" },
    { ticker: "MSFT",  value: 32, value_label: "32x", aside: "+12% YTD" },
    { ticker: "AAPL",  value: 28, value_label: "28x", aside: "−2% YTD" },
    { ticker: "META",  value: 24, value_label: "24x", aside: "+18% YTD" },
    { ticker: "GOOGL", value: 22, value_label: "22x", aside: "+8% YTD" }
  ]
}

Visual register

3-column grid per row: ticker (60px) | bar (flex) | aside (80px). Focus ticker's bar uses solid green; peers use muted gray. Bar fill width = (value / max) * 100%.

Example output

See ./preview.html — Mag 7 Fwd P/E with AAPL highlighted.