chart bar-chart chart-js currency revenue formatting sales bar chart currency dollar sales revenue formatting axis bar chart with dollar formatting revenue bar chart currency axis chart
Bar Chart with Currency Axis
Fetch pattern JSON:
curl https://webspire.de/patterns/chart/bar-currency.json bar-currency.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 by Day</h2>
</div>
<!-- Chart with Y-axis labels -->
<!-- Data: Mon 2112, Tue 2343, Wed 2545, Thu 3423, Fri 2365, Sat 1985, Sun 987 (max 3423) -->
<div class="flex gap-2" role="img" aria-label="Bar chart showing daily revenue Mon–Sun with dollar values">
<!-- 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>
<!-- Bars -->
<div class="flex h-44 flex-1 items-end gap-2">
<div class="flex flex-1 flex-col items-center gap-1.5">
<div class="w-full rounded-t-md bg-indigo-400" style="height:62%"></div>
<span class="text-xs text-[var(--ws-chart-card-text-soft)]">Mon</span>
</div>
<div class="flex flex-1 flex-col items-center gap-1.5">
<div class="w-full rounded-t-md bg-indigo-400" style="height:68%"></div>
<span class="text-xs text-[var(--ws-chart-card-text-soft)]">Tue</span>
</div>
<div class="flex flex-1 flex-col items-center gap-1.5">
<div class="w-full rounded-t-md bg-indigo-400" style="height:74%"></div>
<span class="text-xs text-[var(--ws-chart-card-text-soft)]">Wed</span>
</div>
<div class="flex flex-1 flex-col items-center gap-1.5">
<div class="w-full rounded-t-md bg-indigo-500" style="height:100%"></div>
<span class="text-xs text-[var(--ws-chart-card-text-soft)]">Thu</span>
</div>
<div class="flex flex-1 flex-col items-center gap-1.5">
<div class="w-full rounded-t-md bg-indigo-400" style="height:69%"></div>
<span class="text-xs text-[var(--ws-chart-card-text-soft)]">Fri</span>
</div>
<div class="flex flex-1 flex-col items-center gap-1.5">
<div class="w-full rounded-t-md bg-indigo-400" style="height:58%"></div>
<span class="text-xs text-[var(--ws-chart-card-text-soft)]">Sat</span>
</div>
<div class="flex flex-1 flex-col items-center gap-1.5">
<div class="w-full rounded-t-md bg-indigo-300" style="height:29%"></div>
<span class="text-xs text-[var(--ws-chart-card-text-soft)]">Sun</span>
</div>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Tailwind Only SSR Safe Copy & Paste
Stable Published
chartbar-chartchart-jscurrencyrevenueformattingsales
Bar chart with seven daily data points. The Y-axis ticks.callback prepends $ and formats with toLocaleString() for readable thousands (e.g. $2,545). Grid lines use a subtle dash pattern.