Terminal visualization components for Ink, React CLI framework

• Sparkline - Compact trend visualization with threshold highlighting and gradient colors
• BarChart - Horizontal bar charts with individual row coloring and custom formatting
• TypeScript - Full TypeScript support with comprehensive type definitions
• Auto-width - Responsive charts that adapt to terminal width
• Gradient Colors - 8-level smooth color gradients with automatic terminal compatibility
• Performance - Optimized rendering with React.memo to prevent flickering

npm install @pppp606/ink-chart

import React from 'react';
import { render, Text, Box } from 'ink';
import { Sparkline, BarChart } from '@pppp606/ink-chart';

function App() {
  return (
    <Box flexDirection="column">
      {/* Simple sparkline */}
      <Sparkline data={[1, 3, 2, 5, 4, 6, 3]} />
      
      {/* Bar chart with values */}
      <BarChart 
        data={[
          { label: 'Sales', value: 1250 },
          { label: 'Marketing', value: 800 }
        ]}
        showValue="right"
        sort="desc"
      />
    </Box>
  );
}

render(<App />);

Compact trend visualization perfect for displaying time series data.

<Sparkline 
  data={[1, 3, 2, 8, 4]}
  width={30}
  threshold={5}
  colorScheme="red"
  caption="Sales Trend"
/>

Props:

• data: number[] - Array of numeric values
• width?: 'auto' | 'full' | number - Chart width ('auto': data length, 'full': terminal width, number: fixed width)
• threshold?: number | number[] - Threshold(s) for highlighting (single or gradient)
• colorScheme?: 'red' | 'blue' | 'green' - Color scheme for gradient highlighting
• mode?: 'block' | 'braille' - Rendering mode
• caption?: string - Optional caption below chart

Horizontal bar charts with customizable appearance and individual row colors.

<BarChart 
  data={[
    { label: 'Success', value: 22, color: '#4aaa1a' },
    { label: 'Warnings', value: 8, color: '#d89612' },
    { label: 'Errors', value: 15, color: '#a61d24' }
  ]}
  showValue="right"
  width={50}
  format={(v) => `${v}%`}
/>

Props:

• data: BarChartData[] - Array of data points
• sort?: 'none' | 'asc' | 'desc' - Sort order
• showValue?: 'right' | 'inside' | 'none' - Value display position
• width?: 'auto' | 'full' | number - Chart width ('auto': natural content width, 'full': terminal width, number: fixed width)
• max?: 'auto' | number - Maximum value for scaling
• format?: (value: number) => string - Value formatter
• barChar?: '▆' | '█' | '▓' | '▒' | '░' - Bar character
• color?: string - Default color (overridden by individual BarChartData.color)

BarChartData interface:

interface BarChartData {
  label: string;
  value: number;
  color?: string; // Hex code or Ink color name
}

// 8-level smooth gradient
<Sparkline 
  data={[45, 55, 65, 75, 85, 95, 85, 75]}
  threshold={[55, 62, 68, 74, 79, 84, 89, 94]}
  colorScheme="red"
/>

<BarChart 
  data={[
    { label: 'Q1', value: 125000 },
    { label: 'Q2', value: 180000 }
  ]}
  format={(v) => `$${(v/1000)}K`}
  showValue="right"
/>

<BarChart 
  data={[
    { label: 'Success', value: 85, color: '#4aaa1a' },
    { label: 'Warning', value: 12, color: '#d89612' },
    { label: 'Error', value: 3, color: '#a61d24' }
  ]}
/>

Try the interactive demo to see all features:

# Static examples - all chart features
npm run demo

8-level gradient highlighting with automatic terminal compatibility:

<Sparkline 
  threshold={[10, 20, 30, 40, 50, 60, 70, 80]}
  colorScheme="blue" // red, blue, or green
/>

Color Support:

• 24-bit terminals (iTerm, VSCode): Full RGB gradients
• 256-color terminals: Palette-based gradients
• 16-color terminals: Basic color fallbacks

Detection is automatic based on COLORTERM, TERM, and TERM_PROGRAM environment variables.

Components are optimized with React.memo to prevent unnecessary re-renders:

// Only re-renders when values actually change
<BarChart data={dynamicData} />

Charts can adapt to full terminal width:

<Sparkline width="full" /> // Full terminal width
<BarChart width="full" />  // Full terminal width

MIT