chart line-chart chart-js tooltip currency revenue formatting line chart tooltip currency dollar revenue trend formatting line chart with currency tooltip revenue trend line chart tooltip formatting chart
Line Chart with Currency Tooltips
Fetch pattern JSON:
curl https://webspire.de/patterns/chart/line-tooltip.json line-tooltip.html
<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>
Details
Responsive Tailwind Only SSR Safe Copy & Paste
Stable Published
chartline-chartchart-jstooltipcurrencyrevenueformatting
Line chart with filled area (indigo, 8% opacity) showing weekly sales. The tooltip label callback prepends $ to the formatted value. Y-axis ticks are also currency-formatted. Tension set to 0.3 for a slightly smooth curve.