Charts

Charts 10 · Activity heatmap

A grid of small squares in five shades of grey showing activity across weeks, with a Less to More legend. Sample data.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white p-10'><div class='mx-auto max-w-xl'><h2 class='font-semibold text-black'>Edits in the last 14 weeks</h2><div class='mt-5 grid grid-flow-col grid-rows-7 gap-1'><span class='h-4 w-4 rounded-sm bg-neutral-100'></span><span class='h-4 w-4 rounded-sm bg-neutral-300'></span><span class='h-4 w-4 rounded-sm bg-neutral-100'></span><span class='h-4 w-4 rounded-sm bg-neutral-500'></span><span class='h-4 w-4 rounded-sm bg-neutral-300'></span><span class='h-4 w-4 rounded-sm bg-neutral-100'></span><span class='h-4 w-4 rounded-sm bg-neutral-100'></span><span class='h-4 w-4 rounded-sm bg-neutral-300'></span><span class='h-4 w-4 rounded-sm bg-neutral-500'></span><span class='h-4 w-4 rounded-sm bg-black'></span><span class='h-4 w-4 rounded-sm bg-neutral-500'></span><span class='h-4 w-4 rounded-sm bg-neutral-300'></span><span class='h-4 w-4 rounded-sm bg-neutral-100'></span><span class='h-4 w-4 rounded-sm bg-neutral-100'></span><span class='h-4 w-4 rounded-sm bg-neutral-100'></span><span class='h-4 w-4 rounded-sm bg-neutral-300'></span><span class='h-4 w-4 rounded-sm bg-neutral-300'></span><span class='h-4 w-4 rounded-sm bg-neutral-700'></span><span class='h-4 w-4 rounded-sm bg-black'></span><span class='h-4 w-4 rounded-sm bg-neutral-500'></span><span class='h-4 w-4 rounded-sm bg-neutral-300'></span><span class='h-4 w-4 rounded-sm bg-neutral-100'></span><span class='h-4 w-4 rounded-sm bg-neutral-100'></span><span class='h-4 w-4 rounded-sm bg-neutral-500'></span><span class='h-4 w-4 rounded-sm bg-neutral-300'></span><span class='h-4 w-4 rounded-sm bg-neutral-700'></span><span class='h-4 w-4 rounded-sm bg-black'></span><span class='h-4 w-4 rounded-sm bg-neutral-700'></span><span class='h-4 w-4 rounded-sm bg-neutral-300'></span></div><div class='mt-4 flex items-center gap-2 text-xs text-neutral-500'>Less<span class='h-3 w-3 rounded-sm bg-neutral-100'></span><span class='h-3 w-3 rounded-sm bg-neutral-300'></span><span class='h-3 w-3 rounded-sm bg-neutral-500'></span><span class='h-3 w-3 rounded-sm bg-neutral-700'></span><span class='h-3 w-3 rounded-sm bg-black'></span>More</div></div></section>

Charts 09 · Progress rings

Three circular progress rings built with conic gradients, each with a percent in the middle and a label. Sample data.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-neutral-50 p-10'><div class='mx-auto grid max-w-2xl gap-6 text-center sm:grid-cols-3'><div><div class='relative mx-auto h-28 w-28 rounded-full' style='background:conic-gradient(#000 0 78%,#e5e5e5 78% 100%)'><div class='absolute inset-3 grid place-items-center rounded-full bg-neutral-50 text-xl font-semibold text-black'>78%</div></div><p class='mt-3 text-sm text-neutral-600'>Goal reached</p></div><div><div class='relative mx-auto h-28 w-28 rounded-full' style='background:conic-gradient(#000 0 45%,#e5e5e5 45% 100%)'><div class='absolute inset-3 grid place-items-center rounded-full bg-neutral-50 text-xl font-semibold text-black'>45%</div></div><p class='mt-3 text-sm text-neutral-600'>Storage</p></div><div><div class='relative mx-auto h-28 w-28 rounded-full' style='background:conic-gradient(#737373 0 92%,#e5e5e5 92% 100%)'><div class='absolute inset-3 grid place-items-center rounded-full bg-neutral-50 text-xl font-semibold text-black'>92%</div></div><p class='mt-3 text-sm text-neutral-600'>Uptime</p></div></div></section>

Charts 08 · Grouped bars

Four groups of two bars each, one series in black and one in grey, with a legend. Sample data.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white p-10'><div class='mx-auto max-w-xl'><div class='flex items-center justify-between'><h2 class='font-semibold text-black'>This year vs last year</h2><div class='flex gap-4 text-xs text-neutral-600'><span class='flex items-center gap-1.5'><span class='h-2.5 w-2.5 rounded-sm bg-black'></span>2026</span><span class='flex items-center gap-1.5'><span class='h-2.5 w-2.5 rounded-sm bg-neutral-300'></span>2025</span></div></div><div class='mt-6 grid h-48 grid-cols-4 items-end gap-6'><div class='flex h-full items-end justify-center gap-1.5'><div class='w-5 rounded-t bg-neutral-300' style='height:40%'></div><div class='w-5 rounded-t bg-black' style='height:55%'></div></div><div class='flex h-full items-end justify-center gap-1.5'><div class='w-5 rounded-t bg-neutral-300' style='height:50%'></div><div class='w-5 rounded-t bg-black' style='height:70%'></div></div><div class='flex h-full items-end justify-center gap-1.5'><div class='w-5 rounded-t bg-neutral-300' style='height:62%'></div><div class='w-5 rounded-t bg-black' style='height:60%'></div></div><div class='flex h-full items-end justify-center gap-1.5'><div class='w-5 rounded-t bg-neutral-300' style='height:45%'></div><div class='w-5 rounded-t bg-black' style='height:92%'></div></div></div><div class='mt-3 grid grid-cols-4 text-center text-xs text-neutral-500'><span>Q1</span><span>Q2</span><span>Q3</span><span>Q4</span></div></div></section>

Charts 07 · Dark bar chart

A black card with white vertical bars, the tallest one brightest, and grey labels. Sample data.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-black p-10'><div class='mx-auto max-w-xl rounded-2xl border border-neutral-800 bg-neutral-950 p-6'><h2 class='font-semibold text-white'>Pages published</h2><div class='mt-6 flex h-44 items-end gap-3'><div class='flex-1 rounded-t-md bg-neutral-700' style='height:30%'></div><div class='flex-1 rounded-t-md bg-neutral-700' style='height:45%'></div><div class='flex-1 rounded-t-md bg-neutral-600' style='height:58%'></div><div class='flex-1 rounded-t-md bg-neutral-600' style='height:50%'></div><div class='flex-1 rounded-t-md bg-neutral-500' style='height:72%'></div><div class='flex-1 rounded-t-md bg-white' style='height:95%'></div></div><div class='mt-3 flex gap-3 text-center text-xs text-neutral-500'><span class='flex-1'>Jun</span><span class='flex-1'>Jul</span><span class='flex-1'>Aug</span><span class='flex-1'>Sep</span><span class='flex-1'>Oct</span><span class='flex-1 text-white'>Nov</span></div></div></section>

Charts 06 · Sparkline stat cards

Three small stat cards, each with a number and a tiny line drawn in SVG. Sample data.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-neutral-50 p-10'><div class='mx-auto grid max-w-3xl gap-4 sm:grid-cols-3'><div class='rounded-2xl border border-neutral-200 bg-white p-5'><p class='text-sm text-neutral-500'>Revenue</p><p class='mt-1 text-2xl font-semibold text-black'>$12.4k</p><svg viewBox='0 0 120 36' class='mt-3 w-full'><path d='M0 30 L20 24 L40 27 L60 14 L80 18 L100 6 L120 8' fill='none' stroke='#000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg></div><div class='rounded-2xl border border-neutral-200 bg-white p-5'><p class='text-sm text-neutral-500'>Users</p><p class='mt-1 text-2xl font-semibold text-black'>3,402</p><svg viewBox='0 0 120 36' class='mt-3 w-full'><path d='M0 22 L20 26 L40 18 L60 20 L80 12 L100 14 L120 4' fill='none' stroke='#000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg></div><div class='rounded-2xl border border-neutral-200 bg-white p-5'><p class='text-sm text-neutral-500'>Churn</p><p class='mt-1 text-2xl font-semibold text-black'>1.8%</p><svg viewBox='0 0 120 36' class='mt-3 w-full'><path d='M0 8 L20 12 L40 10 L60 20 L80 18 L100 26 L120 28' fill='none' stroke='#737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg></div></div></section>

Charts 05 · Single stacked bar

One wide stacked bar split into three segments with a legend row under it. Sample data.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white p-10'><div class='mx-auto max-w-xl'><h2 class='font-semibold text-black'>Storage used</h2><p class='mt-1 text-sm text-neutral-500'>6.4 GB of 10 GB</p><div class='mt-5 flex h-4 overflow-hidden rounded-full bg-neutral-100'><div class='w-[40%] bg-black'></div><div class='w-[16%] bg-neutral-500'></div><div class='w-[8%] bg-neutral-300'></div></div><ul class='mt-4 flex flex-wrap gap-x-6 gap-y-2 text-sm text-neutral-600'><li class='flex items-center gap-2'><span class='h-2.5 w-2.5 rounded-full bg-black'></span>Pages 4 GB</li><li class='flex items-center gap-2'><span class='h-2.5 w-2.5 rounded-full bg-neutral-500'></span>Images 1.6 GB</li><li class='flex items-center gap-2'><span class='h-2.5 w-2.5 rounded-full bg-neutral-300'></span>Other 0.8 GB</li></ul></div></section>

Charts 04 · Donut with legend

A donut chart made with a conic gradient in black and greys, a total in the middle and a legend on the right. Sample data.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white p-10'><div class='mx-auto flex max-w-xl flex-wrap items-center gap-10'><div class='relative h-44 w-44 shrink-0 rounded-full' style='background:conic-gradient(#000 0 50%,#737373 50% 80%,#d4d4d4 80% 100%)'><div class='absolute inset-5 grid place-items-center rounded-full bg-white text-center'><div><p class='text-2xl font-semibold text-black'>1,240</p><p class='text-xs text-neutral-500'>visitors</p></div></div></div><ul class='space-y-3 text-sm'><li class='flex items-center gap-3'><span class='h-3 w-3 rounded-sm bg-black'></span><span class='text-black'>Direct</span><span class='ml-auto pl-6 text-neutral-500'>50%</span></li><li class='flex items-center gap-3'><span class='h-3 w-3 rounded-sm bg-neutral-500'></span><span class='text-black'>Search</span><span class='ml-auto pl-6 text-neutral-500'>30%</span></li><li class='flex items-center gap-3'><span class='h-3 w-3 rounded-sm bg-neutral-300'></span><span class='text-black'>Social</span><span class='ml-auto pl-6 text-neutral-500'>20%</span></li></ul></div></section>

Charts 03 · Line with area

A line chart drawn as inline SVG with a pale area fill under a black line, horizontal grid lines and month labels. Sample data.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-neutral-50 p-10'><div class='mx-auto max-w-2xl rounded-2xl border border-neutral-200 bg-white p-6'><h2 class='font-semibold text-black'>Sign-ups</h2><svg viewBox='0 0 600 220' class='mt-4 w-full' role='img' aria-label='Sign-ups line chart'><g stroke='#e5e5e5'><line x1='0' y1='20' x2='600' y2='20'/><line x1='0' y1='80' x2='600' y2='80'/><line x1='0' y1='140' x2='600' y2='140'/><line x1='0' y1='200' x2='600' y2='200'/></g><path d='M0 170 L100 150 L200 160 L300 100 L400 110 L500 50 L600 30 L600 200 L0 200 Z' fill='#f5f5f5'/><path d='M0 170 L100 150 L200 160 L300 100 L400 110 L500 50 L600 30' fill='none' stroke='#000' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'/><circle cx='600' cy='30' r='5' fill='#000'/></svg><div class='mt-2 flex justify-between text-xs text-neutral-500'><span>Jun</span><span>Jul</span><span>Aug</span><span>Sep</span><span>Oct</span><span>Nov</span><span>Dec</span></div></div></section>

Charts 02 · Horizontal bars

Four labelled horizontal bars with a value at the right end of each, longest in black. Sample data.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white p-10'><div class='mx-auto max-w-xl'><h2 class='font-semibold text-black'>Top pages</h2><ul class='mt-6 space-y-5'><li><div class='flex justify-between text-sm'><span class='text-black'>/home</span><span class='text-neutral-500'>4,210</span></div><div class='mt-1.5 h-2.5 rounded-full bg-neutral-100'><div class='h-2.5 w-full rounded-full bg-black'></div></div></li><li><div class='flex justify-between text-sm'><span class='text-black'>/pricing</span><span class='text-neutral-500'>2,880</span></div><div class='mt-1.5 h-2.5 rounded-full bg-neutral-100'><div class='h-2.5 w-[68%] rounded-full bg-neutral-500'></div></div></li><li><div class='flex justify-between text-sm'><span class='text-black'>/docs</span><span class='text-neutral-500'>1,950</span></div><div class='mt-1.5 h-2.5 rounded-full bg-neutral-100'><div class='h-2.5 w-[46%] rounded-full bg-neutral-500'></div></div></li><li><div class='flex justify-between text-sm'><span class='text-black'>/blog</span><span class='text-neutral-500'>980</span></div><div class='mt-1.5 h-2.5 rounded-full bg-neutral-100'><div class='h-2.5 w-[23%] rounded-full bg-neutral-400'></div></div></li></ul></div></section>

Charts 01 · Vertical bars

A card with seven vertical bars of different heights, day labels underneath and one bar highlighted in black. Sample data.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-neutral-50 p-10'><div class='mx-auto max-w-xl rounded-2xl border border-neutral-200 bg-white p-6'><div class='flex items-baseline justify-between'><h2 class='font-semibold text-black'>Visitors this week</h2><p class='text-sm text-neutral-400'>Sample data</p></div><div class='mt-6 flex h-48 items-end gap-3'><div class='flex-1 rounded-t-md bg-neutral-200' style='height:40%'></div><div class='flex-1 rounded-t-md bg-neutral-200' style='height:55%'></div><div class='flex-1 rounded-t-md bg-neutral-200' style='height:48%'></div><div class='flex-1 rounded-t-md bg-black' style='height:90%'></div><div class='flex-1 rounded-t-md bg-neutral-200' style='height:62%'></div><div class='flex-1 rounded-t-md bg-neutral-200' style='height:35%'></div><div class='flex-1 rounded-t-md bg-neutral-200' style='height:28%'></div></div><div class='mt-3 flex gap-3 text-center text-xs text-neutral-500'><span class='flex-1'>Mon</span><span class='flex-1'>Tue</span><span class='flex-1'>Wed</span><span class='flex-1 font-medium text-black'>Thu</span><span class='flex-1'>Fri</span><span class='flex-1'>Sat</span><span class='flex-1'>Sun</span></div></div></section>