Line Chart with Currency Tooltips

<section class="ws-chart bg-[var(--ws-chart-card-bg)] py-10">
  <div class="mx-auto max-w-2xl px-6">
    <div class="overflow-hidden rounded-2xl border border-[var(--ws-chart-card-border)] bg-[var(--ws-chart-card-bg)] p-6 shadow-sm">
      <div class="mb-5">
        <p class="text-xs font-semibold uppercase tracking-widest text-[var(--ws-chart-card-text-soft)]">Weekly Sales</p>
        <h2 class="text-lg font-bold text-[var(--ws-chart-card-text)]">Revenue Trend</h2>
      </div>
      <!-- SVG line chart -->
      <!-- Data: Mon 2112, Tue 2343, Wed 2545, Thu 3423, Fri 2365, Sat 1985, Sun 987 (max 3423) -->
      <!-- Y = 176*(1 - v/3423): Mon=67, Tue=55, Wed=45, Thu=0, Fri=54, Sat=74, Sun=125 -->
      <div class="flex gap-2" role="img" aria-label="Line chart showing weekly revenue trend Mon–Sun">
        <!-- Y axis -->
        <div class="flex shrink-0 flex-col justify-between pb-5 text-right text-[10px] text-[var(--ws-chart-card-text-soft)]">
          <span>$3,500</span>
          <span>$2,500</span>
          <span>$1,500</span>
          <span>$0</span>
        </div>
        <!-- SVG -->
        <div class="h-44 flex-1">
          <svg class="h-full w-full" viewBox="0 0 700 176" preserveAspectRatio="none">
            <!-- grid lines -->
            <line x1="0" y1="44"  x2="700" y2="44"  stroke="currentColor" stroke-width="0.5" stroke-dasharray="4 4" class="text-slate-200"/>
            <line x1="0" y1="88"  x2="700" y2="88"  stroke="currentColor" stroke-width="0.5" stroke-dasharray="4 4" class="text-slate-200"/>
            <line x1="0" y1="132" x2="700" y2="132" stroke="currentColor" stroke-width="0.5" stroke-dasharray="4 4" class="text-slate-200"/>
            <!-- filled area -->
            <path
              d="M 50,67 L 150,55 L 250,45 L 350,0 L 450,54 L 550,74 L 650,125 L 650,176 L 50,176 Z"
              fill="rgba(99,102,241,0.08)"
            />
            <!-- line -->
            <polyline
              points="50,67 150,55 250,45 350,0 450,54 550,74 650,125"
              fill="none"
              stroke="#6366f1"
              stroke-width="2.5"
              stroke-linecap="round"
              stroke-linejoin="round"
              vector-effect="non-scaling-stroke"
            />
            <!-- data points -->
            <circle cx="50"  cy="67"  r="4" fill="#6366f1" vector-effect="non-scaling-stroke"/>
            <circle cx="150" cy="55"  r="4" fill="#6366f1" vector-effect="non-scaling-stroke"/>
            <circle cx="250" cy="45"  r="4" fill="#6366f1" vector-effect="non-scaling-stroke"/>
            <circle cx="350" cy="0"   r="4" fill="#6366f1" vector-effect="non-scaling-stroke"/>
            <circle cx="450" cy="54"  r="4" fill="#6366f1" vector-effect="non-scaling-stroke"/>
            <circle cx="550" cy="74"  r="4" fill="#6366f1" vector-effect="non-scaling-stroke"/>
            <circle cx="650" cy="125" r="4" fill="#6366f1" vector-effect="non-scaling-stroke"/>
          </svg>
          <!-- X labels -->
          <div class="flex justify-between px-0 pt-1.5 text-xs text-[var(--ws-chart-card-text-soft)]">
            <span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>