ASCII Magic
Open tool

Animated ASCII graphs and terminal charts

Every ASCII graph on this page is animated: bars race and swap places, a line chart scrolls left, candles form, gauges swing and a histogram settles into a bell curve. They are drawn in characters, so they look at home in a terminal, a README or any page with a code-flavored design, and they need no charting library to run.

28 pieces

View use cases
Bar Chart RaceLive Data
Latency Box PlotsLive Data
Wealth and Health BubblesLive Data
Twelve Month HeatmapLive Data
Candlestick ChartLive Data
CPU MonitorLive Data
Donut ChartLive Data
Signup FunnelLive Data
Server Gauge ClusterLive Data
Daily Goal RingsLive Data
Contribution HeatmapLive Data
HistogramLive Data
LeaderboardLive Data
Live Line ChartLive Data
Network TrafficLive Data
Election Seat ChartLive Data
Pie ChartLive Data
Polar Ring ClockLive Data
Radar Skill ProfileLive Data
Budget Sankey FlowLive Data
Scatter PlotLive Data
Sparkline PanelLive Data
Speed GaugeLive Data
Stacked Area StreamLive Data
Stock TickerLive Data
Disk Usage TreemapLive Data
Status PageLive Data
World Map PingsLive Data

Where to start

The numbers are built-in demo data, not a live feed, which makes the pieces ideal for landing pages, talks and mockups where a moving chart says more than a static one. To chart real numbers, copy a piece's MIT licensed source from its page and replace the data. For status pages, see the status dashboards guide.

Bar Chart RaceTen city bars race year by year and swap places as their populations grow, an ASCII bar chart that grabs attention on a hero or a title slide.Sparkline PanelSix labeled sparklines scroll with their values, trend arrows and a range bar, a compact ASCII sparkline panel for READMEs and metrics sections.Live Line ChartA latency line chart scrolls left with gridlines, axes and a value tag, the textbook ASCII graph for monitoring and performance pages.Server Gauge ClusterFour arc gauges for CPU, memory, disk and network swing to new readings with sparklines underneath, a full server panel in a single piece.Contribution HeatmapA year of daily activity fills in square by square from gray to bright green, a natural fit for a profile README or a habit tracker page.Budget Sankey FlowThree income streams pour through curved ribbons into five spending categories, an animated sankey for finance explainers and budgeting apps.

Find an ASCII graph by type

Pick by the shape of the story you want to tell. Every type below is animated, and each piece page lists its grid size so you can see how much room it needs.

  • Bars: Bar Chart Race, Histogram and Election Seat Chart, plus the per-file bars of Coverage Report in UI.
  • Lines and areas: Live Line Chart, Stacked Area Stream, and Network Traffic with download and upload graphs.
  • Sparklines: Sparkline Panel, and the small trend lines under each dial in Server Gauge Cluster.
  • Gauges and rings: Speed Gauge, Daily Goal Rings, Donut Chart and Polar Ring Clock.
  • Distributions and comparisons: Scatter Plot with a fitted trend line, Latency Box Plots, Wealth and Health Bubbles and Radar Skill Profile.
  • Flows and parts of a whole: Budget Sankey Flow, Signup Funnel, Pie Chart and Disk Usage Treemap.
  • Markets and rankings: Candlestick Chart, Stock Ticker and Leaderboard.

Terminal charts that run in your shell

Text charts were born in the terminal, and every piece here still plays there. Run npx --yes https://www.ascii-magic.com/ascii/cli.tgz cpu-cores to watch per-core bars, memory and load averages update in color, or try network-traffic for scrolling bandwidth graphs. Add --seconds=5 to stop after five seconds, or --frame to print a single still you can paste into a log or an issue.

If you are building a command line tool and want terminal charts of your own, the source on each piece page shows how bars, axes and labels are laid out on a character grid. Disk Usage Treemap and Budget Sankey Flow are good studies in fitting a complex chart into a fixed number of columns.

Swapping in your own numbers

The graphs animate their own demo data so they always look alive. In most pieces the data sits in plain arrays near the top of the source, such as the traffic sources in Pie Chart or the services in Latency Box Plots. To drive one with real values:

  • Open the piece page and copy its JavaScript source, plus the small helper file it imports.
  • Replace the demo array with your own labels and values, keeping labels short so they fit the grid.
  • Render it with the pattern in the React tab, or call it on a timer and write each frame into a pre element.
  • Fetch new values on whatever schedule suits your data, and keep a text summary nearby for readers.

Making text charts readable for everyone

A chart drawn in characters is announced as an image, so give it an aria-label that states the takeaway, for example: weekly signups rose 18 percent. That helps more than a description of the bars. Do not let color carry the meaning alone. Stock Ticker pairs its green and red with up and down arrows, which is a good model to copy.

Add mono for a single-color version when your page needs higher contrast, and raise the contrast attribute if shading looks faint on a light background. Visitors with reduced motion turned on see a still frame, so check that the still frame tells the story too.

Ways to use ASCII live data

Step-by-step guides with a live builder and code to copy.

All 18 use cases →
Dashboard

ASCII charts for status pages and dashboards

Animated ASCII bar charts, gauges, sparklines and uptime bars for status pages, internal dashboards and terminal tools.

Slides

ASCII art for slides and presentations

Drop animated ASCII art into Keynote, PowerPoint or Google Slides as a GIF or video, for title slides and section breaks.

README

Animated ASCII art for a GitHub README

Put an animated ASCII banner, scene or loader at the top of your GitHub README. Copy a GIF or SVG, no build step, works in GitHub's dark and light themes.

Docs

ASCII art for docs sites and landing pages

Add animated ASCII art to docs and landing pages built with Next.js, Astro, Docusaurus or plain HTML. Diagrams, terminals and heroes that load instantly.

/FAQS

ASCII live data: frequently asked questions

Answers about using ASCII live data on websites, in READMEs, in terminals and in exports.

Q. What is an ASCII graph?
An ASCII graph is a chart drawn with text characters, using blocks for bars, dots and lines for curves, and box characters for axes. It fits wherever text does, from a terminal to a README. The graphs on this page are animated, so values change, bars move and lines scroll while you watch.
Q. How do I make an ASCII bar chart?
The quickest way is to start from a piece: Bar Chart Race, Histogram and Election Seat Chart already lay out bars, labels and scales in characters. Copy the source from the piece page, replace the demo values with your own, and render it in a pre element or a terminal. For a static version, pause and press Copy as text.
Q. What are terminal charts?
Terminal charts are graphs drawn in a command line window with characters and colors instead of pixels. System monitors, build tools and benchmarks use them to show trends without leaving the shell. CPU Monitor, Network Traffic and Live Line Chart on this page show the style, and each plays in your terminal with one command.
Q. Is there an ASCII sparkline example?
Yes, Sparkline Panel shows six labeled sparklines scrolling with their values, trend arrows and a range bar, and Server Gauge Cluster puts a sparkline of the last minute under each dial. Sparklines suit tight spaces such as a README status block, a table cell or the bottom line of a terminal tool.
Q. Do these graphs show real-time data?
No, each graph animates built-in demo data, not a live feed. The numbers, symbols and names are invented so the piece always looks active. To show your own data, copy the source from the piece page and connect it to your values, or use a still frame as an illustration of the idea.
Q. Can I put an animated ASCII graph in a GitHub README?
Yes, as a GIF, because READMEs do not run scripts. Open a piece such as Contribution Heatmap or Sparkline Panel, download the GIF and reference it from your README with an img tag. The README tab on each piece page has the snippet ready, with the file path and alt text filled in.
Q. Which animated chart works best on a slide?
Bar Chart Race is the boldest choice for a title or section slide, because the motion is easy to follow from across a room. Wealth and Health Bubbles and Budget Sankey Flow suit slides that explain a trend or a flow. Export a 1920 by 1080 video for the sharpest result on a projector, or a GIF for slide tools that prefer images.
Q. Can I change the colors of an ASCII graph?
Yes, the embed tag can restyle any graph without code changes. Add mono for a single color, bg for the background and contrast for punchier shading, or choose a look such as Blocks or Squares for chunkier bars. Try Blocks on Histogram for solid columns that read well at small sizes.
Q. Is there an animated candlestick or stock ticker?
Yes, Candlestick Chart scrolls green and red price candles with wicks, the newest one still forming against a moving price line, and Stock Ticker runs a tape of made-up symbols with arrows and percent changes. Both use invented prices, so they suit finance blogs and trading-themed designs rather than real quotes.
Q. How heavy is an animated graph on a web page?
A graph piece is a few KB, far smaller than a video or an animated image of the same chart. It animates only while visible on screen and shows a still frame to visitors with reduced motion turned on. Set the size attribute to scale the characters, for example size="10" for a smaller graph.
Q. Is there a pie chart or donut chart in text?
Yes, both. Pie Chart turns slowly and lifts each slice out in turn beside its legend, and Donut Chart fills clockwise to its target while the percentage counts up in the middle. Daily Goal Rings and Polar Ring Clock use the same ring shape for progress toward goals and for telling the time.
Q. Can I print a graph as plain text for a log or an issue?
Yes, in two ways. On the piece page, pause on the frame you want and press Copy as text, then paste it inside a code block. In a terminal, run the piece with --frame to print one still frame, for example npx --yes https://www.ascii-magic.com/ascii/cli.tgz histogram --frame, and redirect the output to a file.

Related categories

All categories