Typography Labels

font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800&display=swap" rel="stylesheet">

interface HeadlineConfig {
  maxChars: 60;           // Auto-scale down if longer
  casing: "sentence";     // Not title case
  punctuation: "none";    // No period at end
  maxWords: 10;
}

// Formula: [What happened] + [How much/when/who]
const goodHeadlines = [
  "Revenue doubled in two years",
  "Netflix spent $82B on content since 2020",
  "Gen Z saves 50% more than millennials did at same age",
];

function getHeadlineSize(text: string, baseSize: number): number {
  const charCount = text.length;
  if (charCount <= 30) return baseSize;
  if (charCount <= 45) return baseSize * 0.85;
  if (charCount <= 60) return baseSize * 0.7;
  return baseSize * 0.6;  // Force wrap for very long headlines
}

const textStyles = {
  headline: {
    fontSize: 32,
    fontWeight: 800,
    letterSpacing: "-0.02em",
  },
  subtitle: {
    fontSize: 16,
    fontWeight: 400,
  },
  dataLabel: {
    fontSize: 14,
    fontWeight: 600,
    fontFeatureSettings: '"tnum"',  // Tabular numbers
  },
  axisLabel: {
    fontSize: 12,
    fontWeight: 500,
  },
  source: {
    fontSize: 11,
    fontWeight: 400,
    opacity: 0.7,
  },
};

<text style={{ fontFeatureSettings: '"tnum"' }}>
  {value.toLocaleString()}
</text>

function formatCompact(value: number): string {
  const abs = Math.abs(value);
  if (abs >= 1e9) return (value / 1e9).toFixed(1) + "B";
  if (abs >= 1e6) return (value / 1e6).toFixed(1) + "M";
  if (abs >= 1e3) return (value / 1e3).toFixed(1) + "K";
  return value.toLocaleString();
}

function formatCurrency(value: number, currency = "USD"): string {
  if (Math.abs(value) >= 1e9) return "$" + (value / 1e9).toFixed(1) + "B";
  if (Math.abs(value) >= 1e6) return "$" + (value / 1e6).toFixed(1) + "M";
  return new Intl.NumberFormat("en-US", {
    style: "currency",
    currency,
    maximumFractionDigits: 0,
  }).format(value);
}

function formatPercent(value: number, decimals = 1): string {
  return (value * 100).toFixed(decimals) + "%";
}

// Label at the end of each line
<text
  x={xScale(lastPoint.x) + 8}
  y={yScale(lastPoint.y)}
  dominantBaseline="middle"
>
  {seriesName}
</text>

// Value above/beside the bar
const labelInside = barHeight > 24;

<text
  x={barX + barWidth / 2}
  y={labelInside ? barY + 16 : barY - 8}
  fill={labelInside ? palette.background : palette.text}
  textAnchor="middle"
>
  {formatCompact(value)}
</text>

const keyPoints = [
  { point: data[0], anchor: "start" },
  { point: data[data.length - 1], anchor: "end" },
];

// Add max if not at edges
const maxPoint = data.reduce((max, d) => d.y > max.y ? d : max);
if (maxPoint !== data[0] && maxPoint !== data[data.length - 1]) {
  keyPoints.push({ point: maxPoint, anchor: "middle" });
}

// Alternate above/below
const yOffset = i % 2 === 0 ? -12 : 18;

// Check if labels overlap
function labelsOverlap(a: Rect, b: Rect): boolean {
  return !(
    a.x + a.width < b.x ||
    b.x + b.width < a.x ||
    a.y + a.height < b.y ||
    b.y + b.height < a.y
  );
}

// Simple greedy placement
const placedLabels: Rect[] = [];
labels.forEach(label => {
  let yOffset = -12;
  let attempts = 0;
  while (attempts < 4) {
    const rect = { x: label.x, y: label.y + yOffset, width: 60, height: 16 };
    if (!placedLabels.some(p => labelsOverlap(rect, p))) {
      placedLabels.push(rect);
      label.yOffset = yOffset;
      break;
    }
    yOffset = yOffset < 0 ? -yOffset : -yOffset - 12;  // Try other side
    attempts++;
  }
});

interface Callout {
  x: number;
  y: number;
  text: string;
  subtext?: string;
}

function CalloutAnnotation({ callout, palette }: { callout: Callout; palette: ChartPalette }) {
  const labelX = callout.x + 40;
  const labelY = callout.y - 20;

  return (
    <g>
      {/* Highlight circle */}
      <circle
        cx={callout.x}
        cy={callout.y}
        r={8}
        fill={palette.primary}
        fillOpacity={0.2}
        stroke={palette.primary}
        strokeWidth={2}
      />

      {/* Leader line */}
      <line
        x1={callout.x + 8}
        y1={callout.y - 8}
        x2={labelX - 4}
        y2={labelY + 8}
        stroke={palette.textMuted}
        strokeWidth={1}
      />

      {/* Label */}
      <text
        x={labelX}
        y={labelY}
        fill={palette.text}
        fontSize={14}
        fontWeight={600}
      >
        {callout.text}
      </text>
      {callout.subtext && (
        <text
          x={labelX}
          y={labelY + 16}
          fill={palette.textMuted}
          fontSize={12}
        >
          {callout.subtext}
        </text>
      )}
    </g>
  );
}

<polyline
  points={[
    [dataX, dataY],                    // Start at data
    [dataX + 10, dataY - 10],          // Short offset
    [labelX - 4, labelY],              // End near label
  ].map(p => p.join(",")).join(" ")}
  fill="none"
  stroke={palette.textMuted}
  strokeWidth={1}
/>

<svg
  aria-label={`${chartType} showing ${headline || description}`}
  role="img"
>
  <title>{headline}</title>
  <desc>{description}</desc>
  {/* chart content */}
</svg>

<g className="sr-only" aria-hidden="false">
  <text>
    Chart data: {data.map(d => `${d.label}: ${d.value}`).join(", ")}
  </text>
</g>

function wrapText(text: string, maxWidth: number, fontSize: number): string[] {
  const words = text.split(" ");
  const lines: string[] = [];
  let currentLine = "";

  // Rough estimate: ~0.6 * fontSize per character
  const charsPerLine = Math.floor(maxWidth / (fontSize * 0.6));

  words.forEach(word => {
    if ((currentLine + " " + word).trim().length <= charsPerLine) {
      currentLine = (currentLine + " " + word).trim();
    } else {
      if (currentLine) lines.push(currentLine);
      currentLine = word;
    }
  });
  if (currentLine) lines.push(currentLine);

  return lines;
}

// Usage
const headlineLines = wrapText(headline, innerWidth, 32);

{headlineLines.map((line, i) => (
  <text key={i} x={MARGIN.left} y={36 + i * 38} fontSize={32} fontWeight={800}>
    {line}
  </text>
))}