Skip to content

BarGraph

A vector-rendered bar chart with filled rectangles. Bars, axes, and labels are drawn as canvas overlays. The legend is rendered on the ASCII grid. Supports multiple series (grouped bars).

Constructor

ts
new BarGraph(series: Series[], options?: BarGraphOptions)

Series

ts
interface Series {
  label: string
  values: number[]
  color: string
}

Multiple series produce grouped bars (side-by-side within each x position).

BarGraphOptions

PropertyTypeDefaultDescription
xLabelsstring[]Index numbersX-axis labels
yMinnumber0Minimum y value
yMaxnumberAutoMaximum y value
yTicksnumber5Number of y-axis ticks
legendbooleantrueShow ASCII legend
legendPosition'top' | 'bottom''top'Legend placement
glownumber3Bar glow radius (0 to disable)
valueLabelsbooleanfalseShow value above each bar
gridLinesbooleanfalseShow horizontal grid lines
barFillnumber0.8Bar fill ratio within slot (0-1)

Properties

PropertyTypeDescription
overlaysComponentOverlaysRects/vectors/texts/colors produced during render

Methods

render()

ts
render(width: number, height: number): CharGrid

Returns an ASCII grid (mostly blank, with legend text). Populates overlays with VectorRect entries for bars, plus vectors for axes and texts for labels.

setData()

ts
setData(series: Series[]): void

Example

ts
// single series
const chart = new BarGraph([
  { label: 'Sales', values: [120, 95, 140, 85], color: palette.BLUE },
], {
  xLabels: ['Q1', 'Q2', 'Q3', 'Q4'],
  valueLabels: true,
})

// multiple series (grouped)
const chart = new BarGraph([
  { label: '2024', values: [120, 95, 140], color: palette.BLUE },
  { label: '2025', values: [150, 110, 130], color: palette.CYAN },
], {
  xLabels: ['North', 'South', 'East'],
  gridLines: true,
})

// in a layout
const layout = new Box('Revenue', chart)
grid.overlay(g, layout.render(60, 20), 5, 3)
const overlays = grid.collectOverlays(layout, 5, 3)
return { grid: g, ...overlays }