Charts
Stacked or overlapping areas: ASCII lines over glyph fills.
Visitors by source
18.4k
| Point | search | direct | social |
|---|---|---|---|
| 00:00 | 155 | 89 | 30 |
| 01:00 | 162 | 62 | 32 |
| 02:00 | 111 | 101 | 69 |
| 03:00 | 150 | 84 | 58 |
| 04:00 | 102 | 116 | 51 |
| 05:00 | 155 | 115 | 46 |
| 06:00 | 179 | 148 | 49 |
| 07:00 | 179 | 246 | 40 |
| 08:00 | 263 | 305 | 52 |
| 09:00 | 263 | 318 | 60 |
| 10:00 | 399 | 396 | 44 |
| 11:00 | 493 | 381 | 46 |
| 12:00 | 579 | 347 | 80 |
| 13:00 | 586 | 309 | 88 |
| 14:00 | 654 | 277 | 102 |
| 15:00 | 613 | 238 | 144 |
| 16:00 | 601 | 181 | 183 |
| 17:00 | 450 | 137 | 232 |
| 18:00 | 397 | 109 | 251 |
| 19:00 | 309 | 83 | 289 |
| 20:00 | 202 | 119 | 249 |
| 21:00 | 138 | 113 | 245 |
| 22:00 | 186 | 75 | 179 |
| 23:00 | 119 | 111 | 136 |
Controls
pnpm dlx shadcn@latest add @asciicn/ascii-area-chartPulls in the engine at lib/ascii on first install. The @asciicn namespace needs one line in components.json, see Installation.
Install the engine first with npx shadcn@latest add @asciicn/ascii-core, or copy lib/ascii from the repository.
Copy this into components/ascii/ascii-area-chart.tsx:
import { AsciiLineChart, type AsciiLineChartProps } from "@/components/ascii/ascii-line-chart"
export type AsciiAreaChartProps = Omit<AsciiLineChartProps, "area">
/** An ASCII line chart with glyph-filled areas, denser just under each line. `stacked` piles the series on each other. */
export function AsciiAreaChart(props: AsciiAreaChartProps) {
return <AsciiLineChart area {...props} />
}
import { AsciiAreaChart } from "@/components/ascii/ascii-area-chart"
<AsciiAreaChart
label="Traffic by source"
series={[
{ label: "search", data: [120, 180, 260, 340, 310, 280] },
{ label: "direct", data: [80, 110, 150, 190, 170, 160], className: "text-sky-500" },
]}
labels={["Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]}
stacked
/>Leave out stacked to compare series on the same baseline. Hover a name in the readout to fade the others.
| Point | heap | rss |
|---|---|---|
| 00:00 | 395MB | 658MB |
| 01:00 | 430MB | 712MB |
| 02:00 | 426MB | 669MB |
| 03:00 | 474MB | 739MB |
| 04:00 | 507MB | 766MB |
| 05:00 | 551MB | 814MB |
| 06:00 | 632MB | 850MB |
| 07:00 | 656MB | 979MB |
| 08:00 | 714MB | 995MB |
| 09:00 | 703MB | 1088MB |
| 10:00 | 714MB | 1113MB |
| 11:00 | 647MB | 1084MB |
| 12:00 | 618MB | 1006MB |
| 13:00 | 538MB | 980MB |
| 14:00 | 482MB | 852MB |
| 15:00 | 489MB | 817MB |
| 16:00 | 448MB | 760MB |
| 17:00 | 399MB | 705MB |
| 18:00 | 393MB | 698MB |
| 19:00 | 385MB | 716MB |
| 20:00 | 413MB | 708MB |
| 21:00 | 406MB | 675MB |
| 22:00 | 423MB | 706MB |
| 23:00 | 425MB | 654MB |
| Prop | Type | Default | Description |
|---|---|---|---|
| series | { label, data, className? }[] | — | One area per entry, drawn in order. className colours it. |
| label | string | — | Names the chart for screen readers and captions its data table. |
| labels | string[] | — | One per data point, along the x axis and in the readout. |
| stacked | boolean | false | Pile each series on the ones before it, so the top line is the total. Each fill runs down to the series below. |
| width / height | number | 60 / 12 | Plot size in characters and rows. |
| glyphs | string | "shade" | How fills look: shade, hash, dollar, diamond or circle, or any five glyphs. Fills use the second and third. |
| min / max | number | data range | Fix the y scale. Stacked charts start at 0. |
| format | (v) => string | String | Formats axis ticks, the readout and the data table. |
| animate | boolean | true | Draw the lines in from the left, then fade the fills in. |
AsciiLineChart with area, so it shares its ASCII lines, axes, cursor, keyboard support and hidden data table.▒ with shade) and the rest the lighter one (░). Fills start on the row under each _, and stacked bands run down to the line below, so each series keeps its own colour with no gaps. With shade, the cells a /, \ or | passes through are filled too, cut along the stroke with clip-path. Each fill glyph is centred in its own column, so symbols from a fallback font still tile the area.prefers-reduced-motion.motion, plus the line chart, which the CLI installs with it.