@bizan/charts

High-performance chart library for data visualization

Features

• 🚀 High Performance: Canvas/WebGL rendering with 60 FPS
• 📊 Rich Chart Types: Line, Bar, Area, Scatter, Pie, Radar, and more
• ⚡ Sparklines: Ultra-fast mini charts (< 16ms render time)
• 🎨 Themeable: 5 built-in themes + custom themes
• 📈 Data Processing: LTTB downsampling for large datasets
• 🎬 Animations: Smooth transitions with easing functions
• 🖱️ Interactive: Zoom, pan, tooltip, crosshair
• 📦 Small Bundle: 15.62 KB (gzipped)
• 🔧 Flexible: Extensive configuration options
• 📱 Responsive: Auto-resize and mobile-friendly

Installation

# Using pnpm
pnpm add @bizan/charts

# Using npm
npm install @bizan/charts

# Using yarn
yarn add @bizan/charts

Quick Start

import { LineChart } from '@bizan/charts';

const chart = new LineChart({
  container: document.getElementById('chart'),
  width: 800,
  height: 400,
  data: [
    { x: 0, y: 10 },
    { x: 1, y: 20 },
    { x: 2, y: 15 },
    { x: 3, y: 25 },
    { x: 4, y: 30 },
  ],
  options: {
    title: 'Sales Trend',
    xAxis: { label: 'Month' },
    yAxis: { label: 'Sales' },
    smooth: true,
    showPoints: true,
  },
});

chart.render();

Chart Types

Line Chart

Perfect for showing trends over time.

import { LineChart } from '@bizan/charts';

const chart = new LineChart({
  container: element,
  data: [{ x: 0, y: 10 }, { x: 1, y: 20 }],
  options: {
    smooth: true,
    showArea: true,
    showPoints: true,
  },
});

Bar Chart

Great for comparing values across categories.

import { BarChart } from '@bizan/charts';

const chart = new BarChart({
  container: element,
  data: [
    { category: 'A', value: 10 },
    { category: 'B', value: 20 },
  ],
  options: {
    stacked: false,
    horizontal: false,
  },
});

Area Chart

Shows cumulative totals over time.

import { AreaChart } from '@bizan/charts';

const chart = new AreaChart({
  container: element,
  data: [{ x: 0, y: 10 }, { x: 1, y: 20 }],
  options: {
    stacked: true,
    smooth: true,
  },
});

Scatter Chart

Displays relationships between two variables.

import { ScatterChart } from '@bizan/charts';

const chart = new ScatterChart({
  container: element,
  data: [{ x: 10, y: 20, size: 5 }],
  options: {
    showTrendLine: true,
  },
});

Pie Chart

Shows proportions of a whole.

import { PieChart } from '@bizan/charts';

const chart = new PieChart({
  container: element,
  data: [
    { label: 'A', value: 30 },
    { label: 'B', value: 70 },
  ],
  options: {
    innerRadius: 0, // Set > 0 for donut chart
    showLabels: true,
  },
});

Radar Chart

Compares multiple variables.

import { RadarChart } from '@bizan/charts';

const chart = new RadarChart({
  container: element,
  data: {
    labels: ['Speed', 'Power', 'Defense'],
    datasets: [
      { name: 'Player 1', values: [80, 90, 70] },
      { name: 'Player 2', values: [70, 85, 90] },
    ],
  },
});

Sparkline

Ultra-compact charts for inline display.

import { Sparkline } from '@bizan/charts';

const sparkline = new Sparkline({
  container: element,
  data: [10, 20, 15, 25, 30],
  type: 'line', // 'line' | 'area' | 'bar' | 'column'
  options: {
    showMarkers: {
      max: true,
      min: true,
      first: true,
      last: true,
    },
  },
});

Features

Data Processing

Automatic downsampling for large datasets:

import { DataProcessor } from '@bizan/charts';

const processor = new DataProcessor();
const downsampled = processor.downsample(largeDataset, 1000, 'lttb');

Animations

Smooth transitions with easing functions:

chart.update(newData, {
  animation: {
    duration: 1000,
    easing: 'easeInOutCubic',
  },
});

Interactions

Built-in interactive features:

const chart = new LineChart({
  container: element,
  data: data,
  options: {
    tooltip: {
      enabled: true,
      format: (value) => `$${value}`,
    },
    zoom: {
      enabled: true,
      mode: 'x',
    },
    pan: {
      enabled: true,
    },
    crosshair: {
      enabled: true,
    },
  },
});

Themes

5 built-in themes:

import { ThemeManager } from '@bizan/charts';

const themeManager = new ThemeManager();

// Apply built-in theme
themeManager.applyTheme('dark');

// Available themes: 'light', 'dark', 'material', 'business', 'colorful'

// Custom theme
themeManager.applyTheme({
  colors: ['#FF6384', '#36A2EB', '#FFCE56'],
  backgroundColor: '#ffffff',
  textColor: '#333333',
  gridColor: '#e0e0e0',
});

Integration with BiZanGrid

BiZanCharts integrates seamlessly with BiZanGrid:

import { BiZanGrid } from '@bizan/grid';
import { GridChartIntegration } from '@bizan/charts';

const integration = new GridChartIntegration(gridApi);

// Create chart from grid data
const chart = integration.createChart({
  type: 'line',
  xField: 'date',
  yField: 'sales',
  groupBy: 'category',
  aggregation: 'sum',
});

API Reference

Chart Base Class

interface ChartOptions {
  title?: string;
  width?: number;
  height?: number;
  padding?: Padding;
  theme?: Theme;
  animation?: AnimationOptions;
  tooltip?: TooltipOptions;
  legend?: LegendOptions;
}

class BaseChart {
  constructor(config: ChartConfig);
  render(): void;
  update(data: any[], options?: UpdateOptions): void;
  destroy(): void;
  resize(width: number, height: number): void;
  exportImage(format: 'png' | 'jpeg'): string;
}

See full API documentation for details.

Examples

Check out the examples directory:

• Charts Example - All chart types demo
• Grid Integration - BiZanGrid integration

Documentation

• Getting Started
• Chart Types
• Best Practices

Performance

BiZanCharts is optimized for performance:

• Render Time: < 16ms for sparklines
• Large Datasets: Automatic downsampling for 100K+ points
• Frame Rate: 60 FPS animations
• Bundle Size: 15.62 KB (gzipped)

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

TypeScript

Full TypeScript support with type definitions:

import type {
  ChartConfig,
  ChartOptions,
  LineChartOptions,
  BarChartOptions,
  Theme,
} from '@bizan/charts';

License

MIT © BiZan Team

Contributing

See the Contributing Guide for details.

Support

• Documentation
• GitHub Issues
• Discussions