fix(rankings): prevent chart label collisions

Author: ericyangpan

src/components/charts/ModelChartLabel.tsx

@@ -74,23 +74,23 @@ export function ModelChartLabel({ modelId, placement, value, viewBox }: ModelCha
       : placement.textAnchor === 'end'
         ? x - labelWidth
         : x
-  const showLeader = Math.abs(placement.dy) > 20 || Math.abs(placement.dx) > 12
+  const leaderEndX =
+    placement.textAnchor === 'start' ? x - 3 : placement.textAnchor === 'end' ? x + 3 : x
+  const leaderEndY = y + (placement.dy < 0 ? 3 : placement.dy > 0 ? -10 : -3)
 
   return (
     <g>
-      {showLeader && (
-        <line
-          x1={pointX}
-          y1={pointY}
-          x2={x}
-          y2={y + (placement.dy < 0 ? 3 : -10)}
-          stroke="var(--color-text-muted)"
-          strokeDasharray="4 4"
-          strokeOpacity={0.45}
-          strokeWidth={0.6}
-          pointerEvents="none"
-        />
-      )}
+      <line
+        x1={pointX}
+        y1={pointY}
+        x2={leaderEndX}
+        y2={leaderEndY}
+        stroke="var(--color-text-muted)"
+        strokeDasharray="4 4"
+        strokeOpacity={0.45}
+        strokeWidth={0.6}
+        pointerEvents="none"
+      />
       {/* biome-ignore lint/a11y/useSemanticElements: SVG labels cannot render HTML buttons. */}
       <g
         role="button"

src/lib/model-price-intelligence-index.ts

@@ -31,8 +31,8 @@ const selectedModels: SelectedModel[] = [
     labelDx: -8,
     labelDy: 18,
     labelAnchor: 'end',
-    linearLabelDx: 18,
-    linearLabelDy: 28,
+    linearLabelDx: 150,
+    linearLabelDy: 16,
     linearLabelAnchor: 'start',
   },
   {
@@ -63,8 +63,8 @@ const selectedModels: SelectedModel[] = [
     labelDx: -12,
     labelDy: 24,
     labelAnchor: 'end',
-    linearLabelDx: -16,
-    linearLabelDy: 34,
+    linearLabelDx: -20,
+    linearLabelDy: 0,
     linearLabelAnchor: 'end',
   },
   {
@@ -101,11 +101,11 @@ const selectedModels: SelectedModel[] = [
   { modelId: 'gemini-3-6-flash', labelDx: -18, labelDy: 24, labelAnchor: 'end' },
   { modelId: 'grok-4-5', labelDx: 18, labelDy: -24, labelAnchor: 'start' },
   { modelId: 'claude-haiku-4-5', labelDx: -10, labelDy: -10, labelAnchor: 'end' },
-  { modelId: 'claude-sonnet-5', labelDx: 8, labelDy: -10, labelAnchor: 'start' },
+  { modelId: 'claude-sonnet-5', labelDx: 8, labelDy: 22, labelAnchor: 'start' },
   {
     modelId: 'qwen3-7-max',
     labelDx: -10,
-    labelDy: -28,
+    labelDy: 24,
     labelAnchor: 'end',
     usdPriceOverride: {
       input: 2.5,
@@ -116,7 +116,7 @@ const selectedModels: SelectedModel[] = [
   { modelId: 'gemini-3-1-pro-preview', labelDx: 8, labelDy: 18, labelAnchor: 'start' },
   { modelId: 'gpt-5-6-terra', labelDx: 8, labelDy: -32, labelAnchor: 'start' },
   { modelId: 'kimi-k3', labelDx: -8, labelDy: -42, labelAnchor: 'end' },
-  { modelId: 'claude-opus-5', labelDx: -8, labelDy: 18, labelAnchor: 'end' },
+  { modelId: 'claude-opus-5', labelDx: -8, labelDy: 34, labelAnchor: 'end' },
   { modelId: 'gpt-5-6-sol', labelDx: 8, labelDy: -10, labelAnchor: 'start' },
 ]