/artifact-chart

Use <script src="lib:chart"></script> to load the bundled offline window.Chart (Chart.js-compatible API).

---

1. Mandatory rules for <canvas> charts

1. Never fabricate data. Every plotted series must come from a file you read, a command you ran, a mathematical formula, or a cited source.
2. Height lives on the wrapper <div>, never on <canvas>:

   <div style="position: relative; width: 100%; height: 260px;">
     <canvas id="chart"></canvas>
   </div>
   

3. <canvas> cannot resolve CSS variables (var(--...)). Pass explicit hex colors from our chart palette:
   • Series 1 (Blue): #378ADD
   • Series 2 (Teal): #1D9E75
   • Series 3 (Purple): #7F77DD
   • Series 4 (Coral): #D85A30
   • Series 5 (Amber): #BA7517
   • Series 6 (Pink): #D4537E
   • Neutral / baseline (Gray): #888780
4. Build a custom HTML legend above the chart (with 10×10px color swatches and summary values) and disable the built-in canvas legend (plugins: { legend: { display: false } }).
5. Round tick labels and format units ($1.2M, 45 ms, 82%). Place minus signs before currency (-$5, never $-5).

---

2. Standard template

<div class="flex flex-col gap-3">
  <!-- Summary metric cards -->
  <div class="grid grid-cols-3 gap-3">
    <div class="metric-card">
      <div class="text-xs text-fg-subtle">Cold start (p50)</div>
      <div class="text-xl font-medium font-mono tabular-nums mt-1">42 ms</div>
    </div>
    <div class="metric-card">
      <div class="text-xs text-fg-subtle">Warm reuse (p50)</div>
      <div class="text-xl font-medium font-mono tabular-nums mt-1">4 ms</div>
    </div>
    <div class="metric-card">
      <div class="text-xs text-fg-subtle">Speedup</div>
      <div class="text-xl font-medium font-mono tabular-nums text-success-fg mt-1">10.5×</div>
    </div>
  </div>

  <!-- Custom HTML legend -->
  <div class="flex flex-wrap gap-4 text-xs text-fg-subtle">
    <span class="inline-flex items-center gap-1.5">
      <span style="width:10px;height:10px;border-radius:2px;background:#378ADD;display:inline-block;"></span>
      Cold instance (ms)
    </span>
    <span class="inline-flex items-center gap-1.5">
      <span style="width:10px;height:10px;border-radius:2px;background:#1D9E75;display:inline-block;"></span>
      Warm instance (ms)
    </span>
  </div>

  <!-- Sized wrapper div around canvas -->
  <div style="position: relative; width: 100%; height: 260px;">
    <canvas id="lat-chart"></canvas>
  </div>
</div>

<script src="lib:chart"></script>
<script>
  new Chart(document.getElementById("lat-chart"), {
    type: "bar",
    data: {
      labels: ["p50", "p75", "p90", "p99"],
      datasets: [
        { label: "Cold", data: [42, 58, 84, 140], backgroundColor: "#378ADD" },
        { label: "Warm", data: [4, 6, 9, 18], backgroundColor: "#1D9E75" }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: { legend: { display: false } },
      scales: {
        y: {
          min: 0,
          ticks: { callback: function (v) { return v + " ms"; } }
        }
      }
    }
  });
</script>