📊 Pipsend Charts

Professional Financial Charting Library with 12 Technical Indicators & 14 Interactive Drawing Tools

Simple • Powerful • Framework-Agnostic • TypeScript • Production-Ready

📑 Table of Contents

• Why Pipsend Charts?
• Installation
• Quick Start
• Demo & Examples
• Chart Types
• Available Technical Indicators
• Interactive Trading Lines API
• Framework Integration Examples
• Full API Reference
• Real-World Example
• Customization
• Browser Support
• Performance
• Troubleshooting
• FAQ
• Roadmap
• Contributing
• Changelog
• License

🚀 Why Pipsend Charts?

Pipsend Charts is a high-performance financial charting library designed for professional trading applications. Built on TradingView's Lightweight Charts™, enhanced with:

✅ 12 Technical Indicators - SMA, EMA, WMA, Bollinger Bands, RSI, MACD, Stochastic, ATR, Volume, OBV, Trading Sessions, Volume Profile
✅ 14 Interactive Drawing Tools - Position, Ruler, Fibonacci (3 types), Lines (4 types), Shapes (3 types), Annotations (3 types)
✅ Full Visual Rendering - All tools render on canvas with drag & drop support
✅ Functional API - One function call per indicator/tool, auto-updating
✅ Framework Agnostic - Works with React, Vue, Angular, Svelte, or vanilla JS
✅ Lightweight - ~49KB gzipped, minimal dependencies
✅ TypeScript Native - Full type safety and autocomplete
✅ High Performance - 60 FPS on thousands of data points
✅ Production Ready - Battle-tested with comprehensive documentation

🎬 Demo & Examples

Live Examples

Explore interactive examples to see Pipsend Charts in action:

• Basic Indicators Demo - See all 10 technical indicators working together
• Trading Lines Demo - Interactive Stop Loss & Take Profit lines
• Advanced Trading Lines - Click-to-create and advanced features

Screenshots

📊 Candlestick Chart with SMA & EMA
📈 RSI & MACD Oscillators
🎯 Interactive Trading Lines
🌙 Dark & Light Themes

Quick Preview

// Create a professional trading chart in 3 lines
const chart = createChart(document.getElementById('chart'));
const series = chart.addSeries(CandlestickSeries);
applySMA(series, chart, { period: 20 }); // Add moving average

📦 Installation

Package Managers

# npm
npm install @pipsend/charts

# yarn
yarn add @pipsend/charts

# pnpm
pnpm add @pipsend/charts

# bun
bun add @pipsend/charts

CDN

<!-- Production (Minified) -->
<script src="https://unpkg.com/@pipsend/charts/dist/pipsend-charts.standalone.production.js"></script>

<!-- Development (with warnings) -->
<script src="https://unpkg.com/@pipsend/charts/dist/pipsend-charts.standalone.development.js"></script>

Requirements

• Node.js: >= 22.3 (for development)
• Browsers: Modern browsers with ES2015+ support (see Browser Support)

🎯 Quick Start

Basic Candlestick Chart

import { createChart, CandlestickSeries } from '@pipsend/charts';

const chart = createChart(document.getElementById('chart'), {
    width: 800,
    height: 600
});

const candleSeries = chart.addSeries(CandlestickSeries, {
    upColor: '#26a69a',
    downColor: '#ef5350'
});

candleSeries.setData([
    { time: '2024-01-01', open: 100, high: 105, low: 95, close: 102 },
    { time: '2024-01-02', open: 102, high: 108, low: 100, close: 106 },
]);

Adding Technical Indicators

import { 
    createChart, 
    CandlestickSeries,
    applySMA,
    applyRSI,
    applyMACD
} from '@pipsend/charts';

const chart = createChart(document.getElementById('chart'));
const series = chart.addSeries(CandlestickSeries);
series.setData(historicalData);

// Add SMA (Simple Moving Average) - appears on main chart
applySMA(series, chart, { period: 20, color: '#2196F3' });

// Add RSI - appears in separate panel
applyRSI(series, chart, { period: 14, color: '#9C27B0' });

// Add MACD - appears in separate panel
applyMACD(series, chart, { 
    fastPeriod: 12, 
    slowPeriod: 26, 
    signalPeriod: 9 
});

Interactive Trading Lines (100% Configurable)

import { 
    createTradingLine,
    createInteractiveLineManager 
} from '@pipsend/charts';

// Stop Loss (draggable by default)
const stopLoss = createTradingLine(series, chart, {
    price: 95.00,
    type: 'stop-loss',
    onDragEnd: (price) => {
        console.log('Stop Loss updated:', price);
        // Update your order in backend
    }
});

// Take Profit (draggable by default)
const takeProfit = createTradingLine(series, chart, {
    price: 110.00,
    type: 'take-profit',
    onDragEnd: (price) => console.log('TP:', price)
});

// Price Alert - Fully customizable
const alert = createTradingLine(series, chart, {
    price: 100.00,
    title: 'Price Alert',
    color: '#FFC107',
    lineStyle: LineStyle.Dotted,
    onDragEnd: (price) => api.updateAlert(price)
});

// Click-to-create: Create lines by clicking on chart
const manager = createInteractiveLineManager(chart, series);

// Create Stop Loss with click
document.getElementById('btnSL').onclick = async () => {
    await manager.enableClickToCreate('stop-loss');
};

// Create custom Alert with click
document.getElementById('btnAlert').onclick = async () => {
    await manager.enableClickToCreate('custom', {
        title: 'Alert',
        color: '#FFC107',
        onDragEnd: (price) => api.createAlert(price)
    });
};

All lines are draggable and fully configurable - Use them for Stop Loss, Take Profit, Alerts, Targets, Resistance/Support, or anything you need!

📈 Chart Types

Every series is added with chart.addSeries(<Type>, options?, paneIndex?).

| Series | Import | Data shape | |---|---|---| | Candlestick | CandlestickSeries | { time, open, high, low, close } | | Bar (OHLC) | BarSeries | { time, open, high, low, close } | | Line | LineSeries | { time, value } | | Area | AreaSeries | { time, value } | | Baseline | BaselineSeries | { time, value } | | Histogram | HistogramSeries | { time, value, color? } | | Custom | chart.addCustomSeries(paneView) | your own |

Heikin Ashi

Heikin Ashi is a transform of the OHLC bars, not a separate series type, so it is applied on top of an existing candlestick or bar series:

import { createChart, CandlestickSeries, applyHeikinAshi } from '@pipsend/charts';

const series = chart.addSeries(CandlestickSeries);
series.setData(bars);

const ha = applyHeikinAshi(series, chart);

// Back to regular candles
ha.remove();

The source series keeps its real prices and is only painted transparent, not hidden: indicators bound to it keep computing on the true OHLC, its price lines and primitives (positions, alerts, drawings) stay on screen, and remove() restores the chart exactly as it was — which makes this usable as a chart-type toggle. New bars pushed to the source are transformed automatically.

The same trick is exported as hideSeriesPaint(series) for drawing any other view over a series: it blanks the paint, leaves the series visible to the engine, and returns a function that puts the paint back.

Colors can be changed on a running transform, and are the candlestick ones:

applyHeikinAshi(series, chart, {
    upColor: '#26a69a',
    downColor: '#ef5350',
    borderVisible: true,
    wickVisible: true,
    hideSource: true,   // set false to draw over the raw candles
    paneIndex: 0
});

If you only want the numbers — to feed a different series, or to compute on them — use the transform on its own:

import { calculateHeikinAshi } from '@pipsend/charts';

const haBars = calculateHeikinAshi(bars);

Each Heikin Ashi bar folds in the one before it, so the result depends on where the data starts. Pass the whole series rather than a recent window when you can; the difference decays over a few bars.

📊 Available Technical Indicators

Overlay Indicators (appear on main chart)

1. SMA - Simple Moving Average

import { applySMA } from '@pipsend/charts';

applySMA(series, chart, {
    period: 20,
    color: '#2196F3'
});

2. EMA - Exponential Moving Average

import { applyEMA } from '@pipsend/charts';

applyEMA(series, chart, {
    period: 12,
    color: '#FF9800'
});

3. WMA - Weighted Moving Average

import { applyWMA } from '@pipsend/charts';

applyWMA(series, chart, {
    period: 20,
    color: '#4CAF50'
});

4. Bollinger Bands

import { applyBollingerBands } from '@pipsend/charts';

applyBollingerBands(series, chart, {
    period: 20,
    stdDev: 2
});

Panel Indicators (appear in separate panels)

5. RSI - Relative Strength Index

import { applyRSI } from '@pipsend/charts';

applyRSI(series, chart, {
    period: 14,
    color: '#9C27B0'
});

6. MACD - Moving Average Convergence Divergence

import { applyMACD } from '@pipsend/charts';

applyMACD(series, chart, {
    fastPeriod: 12,
    slowPeriod: 26,
    signalPeriod: 9
});

7. Stochastic Oscillator

import { applyStochastic } from '@pipsend/charts';

applyStochastic(series, chart, {
    kPeriod: 14,
    dPeriod: 3
});

8. ATR - Average True Range

import { applyATR } from '@pipsend/charts';

applyATR(series, chart, {
    period: 14,
    color: '#FF9800'
});

9. Volume

import { applyVolume, setVolumeData } from '@pipsend/charts';

// First, set volume data
setVolumeData(series, chartData);

// Then apply volume indicator
applyVolume(series, chart, {
    colorUp: '#26a69a',
    colorDown: '#ef5350'
});

10. OBV - On-Balance Volume

import { applyOBV, setOBVVolumeData } from '@pipsend/charts';

// First, set volume data
setOBVVolumeData(series, chartData);

// Then apply OBV indicator
applyOBV(series, chart, {
    color: '#673AB7'
});

11. Forex Trading Sessions

import { createTradingSessionsIndicator, DEFAULT_SESSIONS } from '@pipsend/charts';

const sessions = createTradingSessionsIndicator(chart, series, {
    sessions: DEFAULT_SESSIONS,
    showOverlaps: true,
    enabled: true
});

12. Volume Profile

import { createVolumeProfileIndicator, setVolumeProfileData } from '@pipsend/charts';

const volumeProfile = createVolumeProfileIndicator(chart, series, {
    numberOfBins: 24,
    valueAreaPercentage: 0.7,
    showPOC: true,
    showValueArea: true
});

setVolumeProfileData(volumeProfile, chartData);

🎨 Interactive Drawing Tools (14 Total)

Trading Analysis Tools

1. Position Tool

Mark trading positions with entry, stop loss, and take profit levels.

import { createPositionTool } from '@pipsend/charts';

const position = createPositionTool({ chart, series }, {
    entryPrice: 1.1000,
    stopLoss: 1.0950,
    takeProfit: 1.1100,
    symbol: 'EURUSD'
});

2. Ruler Tool

Measure distance, percentage change, and time between two points.

import { createRulerTool } from '@pipsend/charts';

const ruler = createRulerTool({ chart, series }, {
    interactive: true,
    symbol: 'EURUSD'
});

Fibonacci Tools

3. Fibonacci Retracement

import { createFibonacciTool } from '@pipsend/charts';

const fib = createFibonacciTool({ chart, series }, {
    point1: { time: startTime, price: lowPrice },
    point2: { time: endTime, price: highPrice }
});

4. Fibonacci Extension

import { createFibonacciExtensionTool } from '@pipsend/charts';

const fibExt = createFibonacciExtensionTool({ chart, series }, {
    interactive: true
});

5. Fibonacci Fan

import { createFibonacciFanTool } from '@pipsend/charts';

const fibFan = createFibonacciFanTool({ chart, series }, {
    interactive: true
});

Line Tools

6. Trend Line

import { createTrendLineTool } from '@pipsend/charts';

const trendLine = createTrendLineTool({ chart, series }, {
    interactive: true,
    extendRight: true
});

7. Horizontal Line

import { createHorizontalLineTool } from '@pipsend/charts';

const hLine = createHorizontalLineTool({ chart, series }, {
    price: 1.1050,
    labelText: 'Resistance'
});

8. Vertical Line

import { createVerticalLineTool } from '@pipsend/charts';

const vLine = createVerticalLineTool({ chart, series }, {
    time: eventTime,
    labelText: 'News Event'
});

9. Arrow Tool

import { createArrowTool } from '@pipsend/charts';

const arrow = createArrowTool({ chart, series }, {
    interactive: true,
    showArrowHead: true
});

Shape Tools

10. Rectangle Tool

import { createRectangleTool } from '@pipsend/charts';

const rectangle = createRectangleTool({ chart, series }, {
    interactive: true,
    labelText: 'Order Block'
});

11. Circle/Ellipse Tool

import { createCircleTool } from '@pipsend/charts';

const circle = createCircleTool({ chart, series }, {
    interactive: true
});

12. Gantt/Timeline Tool

import { createGanttTool } from '@pipsend/charts';

const gantt = createGanttTool({ chart, series }, {
    segments: [/* timeline segments */]
});

Annotation Tools

13. Brush Tool

import { createBrushTool } from '@pipsend/charts';

const brush = createBrushTool({ chart, series }, {
    color: '#2962FF',
    smoothing: true
});

14. Text/Annotations Tool

import { createTextTool } from '@pipsend/charts';

const text = createTextTool({ chart, series }, {
    text: 'Important Level',
    time: annotationTime,
    price: annotationPrice
});

📚 Full Documentation:

• Complete Indicators Guide
• Complete Drawing Tools Guide

🎯 Interactive Trading Lines API

Draggable Stop Loss / Take Profit

import { 
    createTradingLine,
    createInteractiveLineManager
} from '@pipsend/charts';

// 1. Stop Loss with preset
const stopLoss = createTradingLine(series, chart, {
    price: 95.00,
    type: 'stop-loss',
    onDragStart: (price) => console.log('Drag started'),
    onDragMove: (price) => console.log('Moving:', price),
    onDragEnd: (price) => console.log('Final:', price)
});

// 2. Take Profit with preset
const takeProfit = createTradingLine(series, chart, {
    price: 110.00,
    type: 'take-profit',
    onDragEnd: (price) => updateOrderInBackend(price)
});

// 3. Entry Line (non-draggable)
const entry = createTradingLine(series, chart, {
    price: 100.00,
    type: 'entry'
});

// 4. Custom line with full control
const customLine = createTradingLine(series, chart, {
    price: 105.00,
    title: 'Target 1',
    color: '#FF9800',
    lineStyle: LineStyle.Dashed,
    lineWidth: 2,
    draggable: true,
    onDragEnd: (price) => console.log('Custom line:', price)
});

// 5. Interactive Click-to-Create
const manager = createInteractiveLineManager(chart, series);

// Button to activate click mode
document.getElementById('addStopLoss').onclick = async () => {
    const line = await manager.enableClickToCreate('stop-loss');
    // User clicks on chart, line is created at that price
};

document.getElementById('addTakeProfit').onclick = async () => {
    await manager.enableClickToCreate('take-profit');
};

Line Methods

// Get current price
const currentPrice = stopLoss.getPrice();

// Update price programmatically
stopLoss.setPrice(93.00);

// Update options
stopLoss.applyOptions({
    color: '#FF0000',
    title: 'New Stop Loss'
});

// Remove line
stopLoss.remove();

Position Lines

createPositionLine draws entry, take profit and stop loss as one unit: a label per level carrying the size badge and the P&L, a close button, and a connector tying the three together.

import { createPositionLine } from '@pipsend/charts';

const position = createPositionLine(series, chart, {
    entry: { price: 4306.79, badge: '1', formatText: () => '+ 2.32 USD' },
    takeProfit: { price: 4349.58, badge: '1', formatText: (p) => `+ ${(p - 4306.79).toFixed(2)} USD` },
    stopLoss: { price: 4266.06, badge: '1', formatText: (p) => `- ${(4306.79 - p).toFixed(2)} USD` },
    onDragEnd: (level, price) => updateOrderInBackend(level, price),
    onClose: (level) => cancelOrder(level)
});

position.setPrice('takeProfit', 4360);   // move a level
position.applyOptions({ stopLoss: undefined });  // drop a level
position.prices();                        // { entry, takeProfit }
position.remove();

Every level is draggable and closable by default; set draggable: false or closable: false per level. The label's look is shared through theme (background, borderRadius, paddingX, fontSize, …) and defaults to the chart's own background, so it reads on light and dark themes alike.

🌐 Framework Integration Examples

React

import { useEffect, useRef } from 'react';
import { createChart, CandlestickSeries, applySMA, applyRSI } from '@pipsend/charts';

function TradingChart({ data }) {
    const chartContainerRef = useRef<HTMLDivElement>(null);
    const chartRef = useRef<any>(null);
    const seriesRef = useRef<any>(null);

    useEffect(() => {
        if (!chartContainerRef.current) return;

        // Create chart
        chartRef.current = createChart(chartContainerRef.current, {
            width: chartContainerRef.current.clientWidth,
            height: 600
        });

        // Add series
        seriesRef.current = chartRef.current.addSeries(CandlestickSeries);
        seriesRef.current.setData(data);

        // Add indicators
        applySMA(seriesRef.current, chartRef.current, { period: 20 });
        applyRSI(seriesRef.current, chartRef.current, { period: 14 });

        // Cleanup
        return () => {
            if (chartRef.current) {
                chartRef.current.remove();
            }
        };
    }, []);

    // Update data when it changes
    useEffect(() => {
        if (seriesRef.current && data) {
            seriesRef.current.setData(data);
        }
    }, [data]);

    return <div ref={chartContainerRef} />;
}

Vue 3

<template>
  <div ref="chartContainer"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue';
import { createChart, CandlestickSeries, applyMACD } from '@pipsend/charts';

const props = defineProps(['data']);
const chartContainer = ref(null);
let chart = null;
let series = null;

onMounted(() => {
    chart = createChart(chartContainer.value, {
        width: chartContainer.value.clientWidth,
        height: 600
    });

    series = chart.addSeries(CandlestickSeries);
    series.setData(props.data);

    // Add MACD
    applyMACD(series, chart, {
        fastPeriod: 12,
        slowPeriod: 26,
        signalPeriod: 9
    });
});

watch(() => props.data, (newData) => {
    if (series) {
        series.setData(newData);
    }
});

onUnmounted(() => {
    if (chart) {
        chart.remove();
    }
});
</script>

Angular

import { Component, ElementRef, Input, OnInit, OnDestroy, ViewChild } from '@angular/core';
import { createChart, CandlestickSeries, applyBollingerBands } from '@pipsend/charts';

@Component({
  selector: 'app-trading-chart',
  template: '<div #chartContainer></div>'
})
export class TradingChartComponent implements OnInit, OnDestroy {
  @ViewChild('chartContainer') chartContainer!: ElementRef;
  @Input() data: any[];

  private chart: any;
  private series: any;

  ngOnInit() {
    this.chart = createChart(this.chartContainer.nativeElement, {
      width: this.chartContainer.nativeElement.clientWidth,
      height: 600
    });

    this.series = this.chart.addSeries(CandlestickSeries);
    this.series.setData(this.data);

    // Add Bollinger Bands
    applyBollingerBands(this.series, this.chart, {
      period: 20,
      stdDev: 2
    });
  }

  ngOnDestroy() {
    if (this.chart) {
      this.chart.remove();
    }
  }
}

Svelte

<script>
    import { onMount, onDestroy } from 'svelte';
    import { createChart, CandlestickSeries, applyStochastic } from '@pipsend/charts';

    export let data;

    let chartContainer;
    let chart;
    let series;

    onMount(() => {
        chart = createChart(chartContainer, {
            width: chartContainer.clientWidth,
            height: 600
        });

        series = chart.addSeries(CandlestickSeries);
        series.setData(data);

        // Add Stochastic
        applyStochastic(series, chart, {
            kPeriod: 14,
            dPeriod: 3
        });
    });

    $: if (series && data) {
        series.setData(data);
    }

    onDestroy(() => {
        if (chart) {
            chart.remove();
        }
    });
</script>

<div bind:this={chartContainer}></div>

Vanilla JavaScript

import { 
    createChart, 
    CandlestickSeries,
    applySMA,
    applyRSI,
    createTradingLine
} from '@pipsend/charts';

// Create chart
const chart = createChart(document.getElementById('chart'), {
    width: 800,
    height: 600
});

// Add candlestick series
const series = chart.addSeries(CandlestickSeries);
series.setData(historicalData);

// Add indicators
applySMA(series, chart, { period: 50, color: '#FF6D00' });
applyRSI(series, chart, { period: 14 });

// Add trading lines
const stopLoss = createTradingLine(series, chart, {
    price: 95.00,
    type: 'stop-loss',
    onDragEnd: (price) => {
        document.getElementById('slPrice').textContent = price.toFixed(2);
    }
});

📚 Full API Reference

Chart Creation

import { createChart } from '@pipsend/charts';

const chart = createChart(container: HTMLElement, options?: {
    width?: number;
    height?: number;
    layout?: {
        background?: { color: string };
        textColor?: string;
    };
    grid?: {
        vertLines?: { color: string };
        horzLines?: { color: string };
    };
    // ... more options
});

Indicator Options

All indicators support these common options:

{
    period?: number;        // Calculation period
    color?: string;         // Line color
    lineWidth?: number;     // Line width
    visible?: boolean;      // Show/hide indicator
}

Trading Line Options

{
    price: number;                          // Required: Line price
    color?: string;                         // Line color
    lineWidth?: number;                     // Line width (1-4)
    lineStyle?: LineStyle;                  // Solid, Dashed, etc.
    title?: string;                         // Label text
    axisLabelVisible?: boolean;             // Show price on axis
    draggable?: boolean;                    // Enable dragging
    onDragStart?: (price: number) => void;  // Drag start callback
    onDragMove?: (price: number) => void;   // Drag move callback
    onDragEnd?: (price: number) => void;    // Drag end callback
}

🔥 Real-World Example

import { 
    createChart, 
    CandlestickSeries,
    applySMA,
    applyEMA,
    applyBollingerBands,
    applyRSI,
    applyMACD,
    applyVolume,
    setVolumeData,
    createTradingLine,
    createInteractiveLineManager
} from '@pipsend/charts';

// Fetch data from your API
const response = await fetch('/api/ohlcv');
const data = await response.json();

// Create chart
const chart = createChart(document.getElementById('chart'), {
    width: window.innerWidth,
    height: 600,
    layout: {
        background: { color: '#1E222D' },
        textColor: '#DDD',
    },
});

// Add candlestick series
const series = chart.addSeries(CandlestickSeries, {
    upColor: '#26a69a',
    downColor: '#ef5350',
});
series.setData(data);

// Add moving averages
applySMA(series, chart, { period: 20, color: '#2196F3' });
applyEMA(series, chart, { period: 50, color: '#FF9800' });

// Add Bollinger Bands
applyBollingerBands(series, chart, { period: 20, stdDev: 2 });

// Add oscillators
applyRSI(series, chart, { period: 14, color: '#9C27B0' });
applyMACD(series, chart, { fastPeriod: 12, slowPeriod: 26, signalPeriod: 9 });

// Add volume
setVolumeData(series, data);
applyVolume(series, chart, { colorUp: '#26a69a', colorDown: '#ef5350' });

// Add trading lines
const currentPrice = data[data.length - 1].close;

const stopLoss = createTradingLine(series, chart, {
    price: currentPrice * 0.98,
    type: 'stop-loss',
    onDragEnd: async (price) => {
        await fetch('/api/orders/update', {
            method: 'POST',
            body: JSON.stringify({ stopLoss: price })
        });
    }
});

const takeProfit = createTradingLine(series, chart, {
    price: currentPrice * 1.05,
    type: 'take-profit',
    onDragEnd: async (price) => {
        await fetch('/api/orders/update', {
            method: 'POST',
            body: JSON.stringify({ takeProfit: price })
        });
    }
});

// Interactive line manager
const manager = createInteractiveLineManager(chart, series);

document.getElementById('addSL').onclick = async () => {
    const line = await manager.enableClickToCreate('stop-loss', {
        onDragEnd: (price) => console.log('SL:', price)
    });
};

// Responsive
window.addEventListener('resize', () => {
    chart.applyOptions({ width: window.innerWidth });
});

🎨 Customization

Chart Themes

// Dark Theme
const chart = createChart(container, {
    layout: {
        background: { color: '#1E222D' },
        textColor: '#D9D9D9',
    },
    grid: {
        vertLines: { color: '#2B2B43' },
        horzLines: { color: '#363C4E' },
    },
});

// Light Theme
const chart = createChart(container, {
    layout: {
        background: { color: '#FFFFFF' },
        textColor: '#191919',
    },
    grid: {
        vertLines: { color: '#e1e1e1' },
        horzLines: { color: '#e1e1e1' },
    },
});

Custom Indicator Colors

applySMA(series, chart, { 
    period: 20, 
    color: '#FF6B6B',
    lineWidth: 3
});

applyRSI(series, chart, { 
    period: 14, 
    color: '#4ECDC4',
    lineWidth: 2
});

🌐 Browser Support

Pipsend Charts works in all modern browsers that support ES2015+ and Canvas API.

Supported Browsers

| Browser | Minimum Version | |---------|----------------| | Chrome | 63+ | | Firefox | 67+ | | Safari | 11.1+ | | Edge | 79+ | | Opera | 50+ | | iOS Safari | 11.3+ | | Chrome Android | 63+ |

Required Features

• Canvas API - For rendering charts
• ES2015+ (ES6) - Modern JavaScript features
• ResizeObserver - For responsive charts (polyfill included)

Polyfills

For older browsers, you may need to include polyfills:

<!-- For IE11 and older browsers -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=es2015,ResizeObserver"></script>

🏗️ Build Variants

| Dependencies | Mode | ES Module | IIFE | |--------------|------|-----------|------| | No | PROD | pipsend-charts.production.mjs | N/A | | No | DEV | pipsend-charts.development.mjs | N/A | | Yes | PROD | pipsend-charts.standalone.production.mjs | pipsend-charts.standalone.production.js | | Yes | DEV | pipsend-charts.standalone.development.mjs | pipsend-charts.standalone.development.js |

⚡ Performance

Pipsend Charts is built for speed and efficiency, capable of handling large datasets with smooth 60 FPS rendering.

Benchmarks

| Metric | Value | |--------|-------| | Bundle Size | ~49KB gzipped | | Initial Load | < 100ms | | Render 1,000 candles | < 16ms (60 FPS) | | Render 10,000 candles | < 33ms (30 FPS) | | Memory Usage | ~15MB for 10K candles | | Indicator Calculation | < 5ms per indicator |

Performance Tips

1. Use Time-based Data - Time series data performs better than tick data
2. Limit Visible Range - Only render visible candles for best performance
3. Debounce Updates - Batch data updates instead of updating on every tick
4. Lazy Load Indicators - Add indicators only when needed
5. Use Production Build - Always use minified production build in production

Example: Optimized Real-time Updates

let updateQueue = [];
let updateTimer = null;

function queueUpdate(newCandle) {
    updateQueue.push(newCandle);
    
    if (!updateTimer) {
        updateTimer = setTimeout(() => {
            series.update(updateQueue[updateQueue.length - 1]);
            updateQueue = [];
            updateTimer = null;
        }, 100); // Batch updates every 100ms
    }
}

🔧 Development

Building from Source

# Install dependencies
npm install

# Build production
npm run build:prod

# Build development
npm run build

🔧 Troubleshooting

Common Issues

Chart Not Rendering

Problem: Chart container is empty or chart doesn't appear

Solutions:

// 1. Ensure container has explicit dimensions
const container = document.getElementById('chart');
container.style.width = '800px';
container.style.height = '600px';

// 2. Wait for DOM to be ready
document.addEventListener('DOMContentLoaded', () => {
    const chart = createChart(container);
});

// 3. Check if container exists
if (!container) {
    console.error('Chart container not found!');
}

Indicators Not Showing

Problem: Technical indicators don't appear on chart

Solutions:

// 1. Ensure you have data before applying indicators
series.setData(data);
applySMA(series, chart, { period: 20 }); // Apply AFTER setData

// 2. Check data format
const validData = [
    { time: '2024-01-01', open: 100, high: 105, low: 95, close: 102 },
    // time must be string (YYYY-MM-DD) or timestamp
];

// 3. Verify indicator period is not larger than data length
// If you have 10 candles, period: 20 won't work

TypeScript Errors

Problem: Type errors when using the library

Solutions:

// 1. Import types explicitly
import { 
    IChartApi, 
    ISeriesApi,
    CandlestickData 
} from '@pipsend/charts';

// 2. Use proper type annotations
const chart: IChartApi = createChart(container);
const series: ISeriesApi<"Candlestick"> = chart.addSeries(CandlestickSeries);

Performance Issues

Problem: Chart is slow or laggy

Solutions:

// 1. Limit visible data range
chart.timeScale().setVisibleRange({
    from: startTime,
    to: endTime
});

// 2. Use production build
import { createChart } from 'pipsend-charts/dist/pipsend-charts.production.mjs';

// 3. Disable animations for large datasets
chart.applyOptions({
    handleScroll: false,
    handleScale: false
});

Module Not Found Errors

Problem: Cannot find module 'pipsend-charts'

Solutions:

# 1. Clear node_modules and reinstall
rm -rf node_modules package-lock.json
npm install

# 2. Check package.json has the dependency
npm list pipsend-charts

# 3. For TypeScript, ensure moduleResolution is set
# tsconfig.json
{
  "compilerOptions": {
    "moduleResolution": "node"
  }
}

Getting Help

If you encounter issues not covered here:

1. Check Examples - Review the examples directory
2. Search Issues - Look for similar issues on GitHub Issues
3. Ask Questions - Open a new issue with:
   • Your code snippet
   • Expected vs actual behavior
   • Browser/Node version
   • Error messages

❓ FAQ

General Questions

Q: Is Pipsend Charts free to use?
A: Yes! Pipsend Charts is FREE to use in both personal and commercial projects, as long as you use the unmodified version. If you want to modify and redistribute commercially, you'll need a commercial license.

Q: What's the difference between Pipsend Charts and TradingView Lightweight Charts?
A: Pipsend Charts is built on top of TradingView's Lightweight Charts™ and adds:

• 10 pre-built technical indicators (SMA, EMA, RSI, MACD, etc.)
• Interactive draggable trading lines (Stop Loss, Take Profit)
• Simplified functional API for indicators
• Click-to-create line tools

Q: Can I use this in production?
A: Absolutely! Pipsend Charts is production-ready and optimized for performance. Make sure to use the production build.

Q: Do I need a TradingView account?
A: No. Pipsend Charts is a standalone library that doesn't require any TradingView account or API keys.

Technical Questions

Q: Can I add custom indicators?
A: Yes! You can create custom indicators using the underlying TradingView Lightweight Charts API or by extending the existing indicator patterns.

Q: How do I update data in real-time?
A: Use the update() method on your series:

series.update({ time: Date.now() / 1000, open: 100, high: 105, low: 95, close: 102 });

Q: Can I use multiple timeframes?
A: Yes, but you need to create separate charts for each timeframe. You can switch data on the same chart by calling setData() with different timeframe data.

Q: Does it work with cryptocurrency data?
A: Yes! Pipsend Charts works with any OHLC (Open, High, Low, Close) data - stocks, forex, crypto, commodities, etc.

Q: Can I customize the colors and styles?
A: Absolutely! Every aspect of the chart is customizable - colors, line styles, fonts, backgrounds, etc. See the Customization section.

Q: How do I save/export charts?
A: You can export charts as images using the Canvas API:

const canvas = document.querySelector('canvas');
const image = canvas.toDataURL('image/png');

Q: Is server-side rendering (SSR) supported?
A: Pipsend Charts requires a browser environment (Canvas API). For SSR frameworks like Next.js, use dynamic imports:

const Chart = dynamic(() => import('./Chart'), { ssr: false });

Q: What's the maximum number of data points?
A: The library can handle 10,000+ data points smoothly. Performance depends on your hardware and browser.

Q: Can I use this with TypeScript?
A: Yes! Pipsend Charts is written in TypeScript and includes full type definitions.

Q: How do I remove an indicator?
A: Indicators return a cleanup function:

const cleanup = applySMA(series, chart, { period: 20 });
cleanup(); // Removes the indicator

Licensing Questions

Q: Can I use this in a commercial product?
A: Yes! You can use the unmodified library in commercial products for FREE. If you want to modify and redistribute commercially, you need a commercial license.

Q: Do I need to credit Pipsend Charts?
A: Attribution is required as per the license terms. You must include the copyright notice and license in your distribution.

Q: Can I modify the source code?
A: Yes, you can modify for your own internal use. To modify and redistribute commercially, you need a commercial license.

Q: How much does a commercial license cost?
A: Commercial licenses start at $499/year for startups. See LICENSE-COMMERCIAL.md for full pricing.

Q: What if I'm a non-profit or educational institution?
A: Contact us at [email protected] for special pricing and discounts for non-profits and educational institutions.

🗺️ Roadmap

Current Version (1.0.0)

✅ 10 Technical Indicators (SMA, EMA, WMA, RSI, MACD, Stochastic, Bollinger Bands, ATR, Volume, OBV)
✅ Interactive Trading Lines (Stop Loss, Take Profit, Custom Lines)
✅ Click-to-Create Line Tools
✅ Framework Integration Examples (React, Vue, Angular, Svelte)
✅ TypeScript Support
✅ Production-Ready Performance

Planned Features

v1.1.0 (Q4 2025)

• 🔄 More Indicators
  • Fibonacci Retracement
  • Ichimoku Cloud
  • Parabolic SAR
  • ADX (Average Directional Index)
• 📊 Drawing Tools
  • Trend Lines
  • Horizontal Lines
  • Rectangle/Box Drawing
  • More dynamic line tools
• 🎨 Themes
  • Pre-built Dark/Light themes
  • Theme switcher utility

v1.2.0 (Q1 2026)

• 📈 Advanced Features
  • Multi-chart synchronization
  • Chart comparison (overlay multiple symbols)
  • Volume Profile
  • Heatmap visualization
• 🔔 Alerts System
  • Price alerts with notifications
  • Indicator-based alerts
  • Alert management API

v1.3.0 (Q2 2026)

• 🤖 AI/ML Integration
  • Pattern recognition
  • Trend prediction helpers
  • Anomaly detection
• 📱 Mobile Optimization
  • Touch gesture improvements
  • Mobile-specific UI components
  • Responsive chart layouts

Future Considerations

• WebSocket integration examples
• Chart templates/presets
• Export to PDF/PNG
• Replay mode (historical playback)
• Custom indicator builder UI
• Plugin system for community extensions

Community Requests

Have a feature request? Open an issue with the enhancement label!

🤝 Contributing

We welcome contributions from the community! Whether it's bug fixes, new features, documentation improvements, or examples.

How to Contribute

1. Fork the Repository

   git clone https://github.com/ArcaTechCo/PipsendCharts.git
   cd pipsend-charts

2. Install Dependencies

   npm install

3. Create a Branch

   git checkout -b feature/your-feature-name
   # or
   git checkout -b fix/your-bug-fix

4. Make Your Changes

   • Write clean, documented code
   • Follow existing code style
   • Add tests if applicable
   • Update documentation

5. Test Your Changes

   # Run tests
   npm test
      
   # Run linter
   npm run lint
      
   # Build the project
   npm run build:prod

6. Commit Your Changes

   git add .
   git commit -m "feat: add new indicator XYZ"
   # or
   git commit -m "fix: resolve issue with chart rendering"

   Commit Message Format:

   • feat: - New feature
   • fix: - Bug fix
   • docs: - Documentation changes
   • style: - Code style changes (formatting)
   • refactor: - Code refactoring
   • test: - Adding or updating tests
   • chore: - Maintenance tasks

7. Push and Create Pull Request

   git push origin feature/your-feature-name

   Then open a Pull Request on GitHub.

Development Guidelines

• Code Style: Follow the existing ESLint configuration
• TypeScript: Maintain type safety, avoid any types
• Documentation: Update README and add JSDoc comments
• Tests: Add unit tests for new features
• Performance: Ensure changes don't degrade performance
• Backwards Compatibility: Avoid breaking changes when possible

Areas We Need Help With

• 📚 Documentation - Improve examples, tutorials, API docs
• 🐛 Bug Reports - Find and report bugs
• ✨ New Indicators - Implement additional technical indicators
• 🎨 Themes - Create beautiful chart themes
• 🌍 Translations - Translate documentation
• 📝 Examples - Add framework-specific examples
• 🧪 Testing - Improve test coverage

Reporting Bugs

When reporting bugs, please include:

1. Description - Clear description of the issue
2. Steps to Reproduce - Minimal code to reproduce the bug
3. Expected Behavior - What should happen
4. Actual Behavior - What actually happens
5. Environment - Browser, OS, library version
6. Screenshots - If applicable

Code of Conduct

• Be respectful and inclusive
• Provide constructive feedback
• Focus on the code, not the person
• Help others learn and grow

Questions?

• 💬 Discussions - Use GitHub Discussions for questions
• 🐛 Issues - Use GitHub Issues for bugs
• 📧 Email - Contact maintainers for private matters

Thank you for contributing to Pipsend Charts! 🎉

📝 Changelog

[0.0.8] - 2025-10-24

🎉 Initial Release

Core Features

• ✅ Professional candlestick charting library
• ✅ Built on TradingView's Lightweight Charts™
• ✅ Full TypeScript support with type definitions
• ✅ Framework-agnostic (React, Vue, Angular, Svelte, Vanilla JS)

Technical Indicators (10 Total)

Overlay Indicators:

• ✅ SMA (Simple Moving Average)
• ✅ EMA (Exponential Moving Average)
• ✅ WMA (Weighted Moving Average)
• ✅ Bollinger Bands

Panel Indicators:

• ✅ RSI (Relative Strength Index)
• ✅ MACD (Moving Average Convergence Divergence)
• ✅ Stochastic Oscillator
• ✅ ATR (Average True Range)
• ✅ Volume
• ✅ OBV (On-Balance Volume)

Interactive Trading Tools

• ✅ Draggable price lines (Stop Loss, Take Profit)
• ✅ Click-to-create line functionality
• ✅ Interactive line manager
• ✅ Customizable line styles and colors
• ✅ Drag event callbacks (onDragStart, onDragMove, onDragEnd)

API & Developer Experience

• ✅ Functional API for indicators (one function call per indicator)
• ✅ Auto-updating indicators when data changes
• ✅ Comprehensive TypeScript types
• ✅ Full API documentation
• ✅ Framework integration examples

Performance

• ✅ ~49KB gzipped bundle size
• ✅ 60 FPS rendering for 1,000+ candles
• ✅ Optimized for real-time data updates
• ✅ Minimal dependencies

Documentation

• ✅ Complete README with examples
• ✅ API reference documentation
• ✅ Framework integration guides
• ✅ Live HTML examples

Build System

• ✅ ES Module builds
• ✅ IIFE builds for CDN usage
• ✅ Development and production variants
• ✅ Standalone and dependency-based builds

For detailed changes in future versions, see GitHub Releases.

📄 License

Pipsend Charts is available under a Dual License model.

🆓 Free License

Use Pipsend Charts for FREE in your projects!

✅ What You CAN Do (FREE):

• ✅ Use the unmodified library in personal projects
• ✅ Use the unmodified library in commercial applications
• ✅ Distribute the original, unmodified library
• ✅ Include as a dependency in your projects
• ✅ Make internal modifications for your own use (not for redistribution)

❌ What You CANNOT Do (Without Commercial License):

• ❌ Modify and redistribute commercially
• ❌ Sell modified versions
• ❌ Create derivative products for commercial distribution
• ❌ White-label or rebrand modified versions

💼 Commercial License

Need to modify and redistribute? Get a commercial license!

If you want to:

• Modify the source code and sell it
• Create derivative products for commercial distribution
• Redistribute modified versions under your own brand
• Build SaaS products with modified versions

View Commercial License Options →

Pricing starts at $499/year for startups. Enterprise licenses available.

📋 Quick Comparison

| Feature | Free License | Commercial License | |---------|--------------|-------------------| | Use in personal projects | ✅ Free | ✅ Included | | Use in commercial apps (unmodified) | ✅ Free | ✅ Included | | Modify for internal use | ✅ Free | ✅ Included | | Modify and redistribute commercially | ❌ Not allowed | ✅ Allowed | | Sell modified versions | ❌ Not allowed | ✅ Allowed | | White-label/rebrand | ❌ Not allowed | ✅ Allowed | | Priority support | ❌ No | ✅ Yes | | Custom features | ❌ No | ✅ Yes (Enterprise) |

🤔 Do I Need a Commercial License?

You DON'T need a commercial license if:

• You're using the library as-is in your app (even commercial apps)
• You're making internal modifications for your own use
• You're using it for learning or personal projects

You DO need a commercial license if:

• You want to sell a modified version of the library
• You want to create a competing product based on this library
• You want to redistribute modified versions commercially

📜 Full License Text

See the LICENSE file for complete terms and conditions.

💬 Questions About Licensing?

• 📧 Email: [email protected]
• 💬 Discussions: GitHub Discussions
• 📄 Commercial License Details: LICENSE-COMMERCIAL.md

Attribution

Pipsend Charts is built on top of TradingView's Lightweight Charts™, which is licensed under Apache 2.0.

Copyright Notice:

Copyright (c) 2025 Pipsend
Based on TradingView's Lightweight Charts™ (Copyright 2024 TradingView, Inc.)

Third-Party Components

This project includes code from:

• TradingView Lightweight Charts™ - Apache 2.0
• fancy-canvas - ISC License

These components retain their original licenses.

🙏 Acknowledgments

• TradingView - For creating the excellent Lightweight Charts library
• Contributors - Everyone who has contributed to this project
• Community - Users who provide feedback and report issues

📞 Support & Contact

• Documentation: README.md
• Examples: ./examples
• Issues: GitHub Issues
• Discussions: GitHub Discussions
• Website: https://github.com/ArcaTechCo/PipsendCharts

Made with ❤️ by the Pipsend Team

⭐ Star us on GitHub if you find this project useful!

Report Bug · Request Feature · Documentation