Examples

When you run task, all of the examples are built into the the bin directory of ntcharts. So run any example below like so: ./bin/ntcharts-quickstart.

These examples are live at https://nimblemarkets.github.io/ntcharts/. They were compiled to WASM and embedded in HTML using NimbleMarkets/go-booba.

Quickstart

This tutorial creates a simple Time Series Chart with two data sets utilizing the Bubble Tea framework, Lip Gloss for styling and BubbleZone for mouse support.

ntcharts-quickstart (source)

Canvas

A Canvas provides a 2D grid to plot arbitrary runes supporting Lip Gloss styles and uses BubbleZone for mouse support.

ntcharts-canvas-logo (source)

Graphing

There are various graphing functions for drawing runes onto the Canvas.

Braille

ntcharts-graph-braille (source)

Candlesticks

ntcharts-graph-candlesticks (source)

Circles

ntcharts-graph-circles (source)

Columns

ntcharts-graph-columns (source)

Lines

ntcharts-graph-lines (source)

Rows

ntcharts-graph-rows (source)

Bar Chart

Barcharts displays values as either horizontal rows or vertical columns.

Rows

ntcharts-barchart-horizontal (source)

Columns

ntcharts-barchart-vertical (source)

Line Chart

Linecharts displays (X,Y) data points onto a 2D grid in various types of charts.

Circles

Circles can be displayed with a given point and radius.

ntcharts-linechart-circles (source)

Lines

Lines can be displayed between two points.

ntcharts-linechart-lines (source)

Scatter

Scatter charts can be created by plotting abitrary runes onto (X,Y) coordinates.

ntcharts-linechart-scatter (source)

Streaming

Streaming charts display a continuous a line moving across the Canvas from the right side to the left side.

ntcharts-linechart-streaming (source)

Time Series

Time series charts have values on the Y axis and time values on the X axis.

ntcharts-linechart-timeseries (source)

Wave Line

Wave line charts display a continuous a line going across the line chart.

ntcharts-linechart-wavelines (source)

Sparkline

Sparklines displays data moving across the Canvas from the right side to the left side.

ntcharts-sparkline (source)

Heatmap

Heatmaps display (x,y) data over a grid with color mapping.

ntcharts-heatmap-simple Simple Heatmap (source)

ntcharts-heatmap-aoc2024 AoC 2024.4 Heatmap (source)

ntcharts-heatmap-functor Functors TUI(source)

ntcharts-heatmap-perlin Perlin Noise TUI (source)

Picture

picture displays a Golang image.Image via Glyph (colored block) or full Kitty terminal graphics. pictureurl adds HTTP loading features. (For details on running Kitty graphics inside tmux, see KITTY.md).

The example's source image is a hand-made 1-bit recreation of Hokusai's waves: 01 of 36 views of Mt Fuji by hypertalking

g toggles Glyph ↔ Kitty; f cycles fit mode (Contain → Fill → Cover); q quits.

ntcharts-picture (source)

ntcharts-picture-grid (source)
Composes sprites into a picture.GridImage, then renders that single bitmap with FitFill so logical board coordinates stay aligned with Kitty terminal cells.

ntcharts-picture-simple is a minimal example (source)

Chart Picture

chartpicture displays a github.com/go-analyze/charts chart via an embedded picture.Model. In the example, you may toggle between a random line chart and bar chart. You can toggle between glyph mode and Kitty Graphics mode.

ntcharts-chartpicture (source)

Heat Picture

heatpicture is a continuous-field heatmap rendered through an embedded picture.Model — a Sampler func(x, y float64) float64 is sampled at full terminal-pixel resolution in Kitty mode (smooth gradients, no cell-grid quantization), and at half-block resolution in Glyph mode for fast fallback. Compared to heatmap (which stores sparse data points and renders one solid color per cell), heatpicture is the right fit for function-driven sources where every pixel can be sampled cheaply.

The Perlin demo animates a 2D Perlin-noise field. <space> starts/stops the animation; t toggles Glyph ↔ Kitty; F cycles the sampling factor (1.0 → 0.5 → 0.25) to trade quality for animation smoothness on large terminals; g/i cycle/invert the gradient; a/z, s/x, d/c, f/v adjust α, β, n, and seed. The info bar shows per-frame render time and frame/composite counters.

ntcharts-heatpicture-perlin (source)