Chart

ASCII-styled data visualization components with bar, line, and area chart variants.

Docs•API Reference

Bar Chart

▇
▇ ▇
▇ ▇ ▇
▇ ▇ ▇ ▇
▇ ▇ ▇ ▇
▇▇ ▇ ▇ ▇
▇▇ ▇ ▇▇▇
▇▇▇▇ ▇▇▇
Min: 2Max: 9

Line Chart

││ ●●
││●●│
●●│││││
│││││││
│││●●││
│●● ││
● ││
●●

Area Chart

▓
▓ ▒
▒ ▓ ▓ ▒
▓ ▓ ▓ ▓
▓ ▓▒▓ ▓
▓▒▓▓▓▒▓
▓▓▓▓▓▓▓
▒▓▓▓▓▓▓▓

Interactive Example

Sample Data
▇
▇ ▇
▇ ▇ ▇
▇ ▇ ▇
▇ ▇ ▇ ▇
▇ ▇ ▇▇▇
▇▇▇ ▇▇▇ ▇
▇▇▇▇ ▇▇▇ ▇
▇▇▇▇ ▇▇▇ ▇
▇▇▇▇▇▇▇▇ ▇
Min: 1Max: 9

Installation

npm install react-ascii-ui

Usage

import { AsciiChart } from 'react-ascii-ui';

export default function Example() {
  const data = [3, 7, 4, 9, 2, 8, 5];

  return (
    <AsciiChart 
      data={data}
      type="bar"
      color="success"
      title="Sales Data"
      showValues
    />
  );
}

Examples

Bar Chart

▇
▇ ▇
▇ ▇ ▇
▇▇ ▇ ▇ ▇
▇▇ ▇ ▇▇▇
▇▇▇▇ ▇▇▇
Min: 2Max: 9
<AsciiChart 
  data={[5, 8, 3, 9, 2, 7, 4, 6]}
  type="bar"
  height={6}
  showValues
/>

Line Chart

││ ●●
││●●││
●●││││││●●
│││││││││
│││●●││││
│●● ││●●
● ││
●● 
<AsciiChart 
  data={[2, 5, 3, 8, 4, 6, 1, 7, 3, 5]}
  type="line"
  color="primary"
  height={8}
/>

Area Chart

▓ ▒
▓ ▓
▒ ▓ ▓ ▒
▓ ▓▒▓ ▓
▓ ▓▓▓ ▓
▓▒▓▓▓▒▓
▒▓▓▓▓▓▓▓
<AsciiChart 
  data={[1, 4, 2, 6, 3, 5, 2, 4]}
  type="area"
  color="success"
  height={7}
/>

With Title and Values

Monthly Revenue
▇ ▇
▇ ▇ ▇
▇ ▇ ▇
▇▇ ▇ ▇
▇▇ ▇ ▇
▇▇ ▇ ▇
▇▇ ▇▇ ▇▇
▇▇ ▇▇ ▇▇
Min: 3Max: 19
<AsciiChart 
  data={[12, 19, 3, 17, 6, 3, 19, 6]}
  type="bar"
  color="warning"
  title="Monthly Revenue"
  showValues
  height={8}
/>

Error Visualization

System Errors
▓ ▒
▒ ▓ ▓
▓ ▓ ▓ ▒
▓ ▓ ▓ ▓
▓ ▓ ▓ ▓▒
▓ ▓ ▓▒▓▓
▓▒▓ ▓▓▓▓
▓▓▓▒▓▓▓▓
Min: 1Max: 9
<AsciiChart 
  data={[7, 2, 9, 1, 8, 3, 6, 4]}
  type="area"
  color="error"
  title="System Errors"
  showValues
/>

API Reference

Props

PropTypeDefaultDescription
datanumber[]-Array of numeric data points to visualize
type'bar' | 'line' | 'area''bar'Chart visualization type
heightnumber8Height of the chart in character rows
widthnumberdata.lengthWidth of the chart in characters
showValuesbooleanfalseWhether to show min/max values below the chart
color'default' | 'success' | 'warning' | 'error' | 'primary''default'Color theme for the chart
titlestring-Optional title displayed above the chart
classNamestring""Additional CSS classes

Chart Types

  • Bar Chart: Uses solid blocks (▇) for data visualization
  • Line Chart: Connects data points with dots (●) and vertical lines (│)
  • Area Chart: Filled areas with solid (▓) and gradient (▒) patterns

Features

  • Auto Normalization: Data is automatically scaled to fit the chart height
  • Color Themes: Five semantic color variants for different data types
  • Responsive: Charts adapt to different data lengths
  • Value Display: Optional min/max value indicators
  • ASCII Styling: Pure ASCII characters for retro aesthetic

AsciiChart extends all HTML div attributes and supports all React div props.