Type Definitions Reference¶

This page contains all TypeScript type definitions used by the Handwritten Graph Library.

Core Interfaces¶

ChartMargin¶

interface ChartMargin {
  top: number;
  right: number;
  bottom: number;
  left: number;
}

Defines the margins around the chart plotting area.

ChartPosition¶

interface ChartPosition {
  type: 'auto' | 'upLeft' | 'upRight' | 'downLeft' | 'downRight';
  x: number;
  y: number;
}

Used for tooltip positioning.

TooltipItem¶

interface TooltipItem {
  color: string;
  text: string;
}

Represents an item in a tooltip display.

Line Chart Types¶

LineDataset¶

interface LineDataset {
  label: string;
  data: number[];
  lineColor?: string;
  jitter?: number;
}

LineChartData¶

interface LineChartData {
  labels: string[];
  datasets: LineDataset[];
}

LineChartConfig¶

interface LineChartConfig extends BaseChartConfig {
  lineColor?: string;
  pointRadius?: number;
  gridColor?: string;
  handDrawnPoints?: number;
  legendBorder?: boolean;
  valueFormat?: (value: number) => string;
  showArea?: boolean;
}

Bar Chart Types¶

BarDataset¶

interface BarDataset {
  label: string;
  data: number[];
  barColor?: string;
  borderColor?: string;
  borderWidth?: number;
}

BarChartData¶

interface BarChartData {
  labels: string[];
  datasets: BarDataset[];
}

BarChartConfig¶

interface BarChartConfig extends BaseChartConfig {
  barColor?: string;
  borderColor?: string;
  borderWidth?: number;
  gridColor?: string;
  legendBorder?: boolean;
  valueFormat?: (value: number) => string;
  barSpacing?: number;
  groupSpacing?: number;
  showValues?: boolean;
  orientation?: 'vertical' | 'horizontal';
}

Pie Chart Types¶

PieChartDataItem¶

interface PieChartDataItem {
  label: string;
  value: number;
  color?: string;
}

PieChartData¶

type PieChartData = PieChartDataItem[];

PieChartConfig¶

interface PieChartConfig extends BaseChartConfig {
  innerRadius?: number;
  padAngle?: number;
  cornerRadius?: number;
  legendBorder?: boolean;
  valueFormat?: (value: number) => string;
}

Base Configuration¶

BaseChartConfig¶

interface BaseChartConfig {
  width?: number;
  height?: number;
  margin?: Partial<ChartMargin>;
  fontFamily?: string;
  handDrawnEffect?: boolean;
  handDrawnJitter?: number;
  strokeLinecap?: 'butt' | 'round' | 'square';
  strokeLinejoin?: 'miter' | 'round' | 'bevel';
  tooltipBgColor?: string;
  tooltipTextColor?: string;
  tooltipBorderColor?: string;
  tooltipBorderWidth?: number;
  tooltipBorderRadius?: number;
  tooltipOpacity?: number;
  useScribbleFill?: boolean;
  fillStyle?: 'directional' | 'oilpaint';
}

Factory Function Types¶

LineChartFactory¶

type LineChartFactory = (
  selector: string,
  data: LineChartData,
  config?: Partial<LineChartConfig>
) => () => void;

BarChartFactory¶

type BarChartFactory = (
  selector: string,
  data: BarChartData,
  config?: Partial<BarChartConfig>
) => () => void;

PieChartFactory¶

type PieChartFactory = (
  selector: string,
  data: PieChartData,
  config?: Partial<PieChartConfig>
) => () => void;

Library Namespace¶

HandwrittenGraphNamespace¶

interface HandwrittenGraphNamespace {
  LineChart: new (selector: string, data: LineChartData, config?: Partial<LineChartConfig>) => ILineChart;
  BarChart: new (selector: string, data: BarChartData, config?: Partial<BarChartConfig>) => IBarChart;
  PieChart: new (selector: string, data: PieChartData, config?: Partial<PieChartConfig>) => IPieChart;
  createGraph: LineChartFactory;
  createBarChart: BarChartFactory;
  createPieChart: PieChartFactory;
}

Chart Interface Types¶

ILineChart¶

interface ILineChart {
  destroy(): void;
}

IBarChart¶

interface IBarChart {
  destroy(): void;
}

IPieChart¶

interface IPieChart {
  destroy(): void;
}

Usage Examples¶

Basic Type Usage¶

import { LineChart, LineChartData, LineChartConfig } from 'handwritten-graph';

const data: LineChartData = {
  labels: ['A', 'B', 'C'],
  datasets: [{
    label: 'Series 1',
    data: [1, 2, 3],
    lineColor: '#ff0000'
  }]
};

const config: Partial<LineChartConfig> = {
  width: 800,
  height: 400,
  handDrawnEffect: true
};

const chart = new LineChart('#container', data, config);

Advanced Type Usage¶

import { BarChartData, BarDataset } from 'handwritten-graph';

const createDataset = (label: string, data: number[]): BarDataset => ({
  label,
  data,
  barColor: '#3498db'
});

const chartData: BarChartData = {
  labels: ['Q1', 'Q2', 'Q3', 'Q4'],
  datasets: [
    createDataset('Sales', [100, 150, 200, 180]),
    createDataset('Profit', [20, 35, 50, 45])
  ]
};