Pipsend Charts for the Web

# npm
npm install @pipsend/charts

# yarn
yarn add @pipsend/charts

# pnpm
pnpm add @pipsend/charts

# bun
bun add @pipsend/charts

<!-- 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>

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 },
]);

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
});

import {
    createTradingLine,
    createInteractiveLineManager,
    LineStyle
} 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);

document.getElementById('btnSL').onclick = async () => {
    await manager.enableClickToCreate('stop-loss');
};

<div id="chart" style="width: 100%; height: 600px;"></div>
<script src="https://unpkg.com/@pipsend/charts/dist/pipsend-charts.standalone.production.js"></script>
<script>
    const chart = PipsendCharts.createChart(document.getElementById('chart'), {
        height: 600,
        layout: { background: { color: '#ffffff' }, textColor: '#333' },
        timeScale: { timeVisible: true, secondsVisible: false },
    });

    const series = chart.addSeries(PipsendCharts.CandlestickSeries, {
        upColor: '#26a69a',
        downColor: '#ef5350',
    });
    series.setData(candles);
    chart.timeScale().fitContent();
</script>

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

const chart = createChart(container: string | HTMLElement, options?: DeepPartial<ChartOptions>);

const chart = createChart(document.getElementById('chart'), {
    width: 800,
    height: 600,
    layout: {
        background: { color: '#1E222D' },
        textColor: '#DDD',
    },
    grid: {
        vertLines: { color: '#2B2B43' },
        horzLines: { color: '#363C4E' },
    },
});

1529899200                       // UTCTimestamp: UNIX seconds (not milliseconds)
'2021-02-03'                     // ISO business-day string
{ year: 2021, month: 2, day: 3 } // BusinessDay

series.setData([
    { time: '2024-01-02', value: 27.02 },
    { time: '2024-01-03' },              // gap
    { time: '2024-01-04', value: 23.92 }
]);

series.applyOptions({
    priceFormat: { type: 'price', precision: 5, minMove: 0.00001 }  // FX
});

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

const series = chart.addSeries(CandlestickSeries, {
    upColor: '#26a69a',
    downColor: '#ef5350',
    borderVisible: true,
    borderUpColor: '#26a69a',
    borderDownColor: '#ef5350',
    wickVisible: true,
    wickUpColor: '#26a69a',
    wickDownColor: '#ef5350'
});

series.setData([
    { time: '2024-01-02', open: 100, high: 105, low: 99, close: 104 },
    { time: '2024-01-03', open: 104, high: 108, low: 103, close: 106 }
]);

{ time: '2024-01-04', open: 106, high: 110, low: 105, close: 109, color: '#ffb300' }

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

const series = chart.addSeries(BarSeries, {
    upColor: '#26a69a',
    downColor: '#ef5350',
    openVisible: true,   // the left tick (open)
    thinBars: true       // 1px bars instead of scaled ones
});

import { LineSeries, LineStyle, LineType } from '@pipsend/charts';

const series = chart.addSeries(LineSeries, {
    color: '#2196f3',
    lineWidth: 2,               // only 1 | 2 | 3 | 4
    lineStyle: LineStyle.Solid, // Solid, Dotted, Dashed, LargeDashed, SparseDotted
    lineType: LineType.Simple,  // Simple, WithSteps, Curved
    lineVisible: true,
    pointMarkersVisible: false
});

series.setData([
    { time: '2024-01-02', value: 104 },
    { time: '2024-01-03', value: 106 }
]);

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

const series = chart.addSeries(AreaSeries, {
    lineColor: '#33D778',
    topColor: 'rgba(46, 220, 135, 0.4)',
    bottomColor: 'rgba(40, 221, 100, 0)',
    lineWidth: 2
});

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

const series = chart.addSeries(BaselineSeries, {
    baseValue: { type: 'price', price: 100 },   // the cut-off level
    topLineColor: 'rgba(38, 166, 154, 1)',
    topFillColor1: 'rgba(38, 166, 154, 0.28)',
    topFillColor2: 'rgba(38, 166, 154, 0.05)',
    bottomLineColor: 'rgba(239, 83, 80, 1)',
    bottomFillColor1: 'rgba(239, 83, 80, 0.05)',
    bottomFillColor2: 'rgba(239, 83, 80, 0.28)'
});

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

const series = chart.addSeries(HistogramSeries, {
    color: '#26a69a',
    base: 0,                          // where the bars grow from
    priceFormat: { type: 'volume' }   // formats 1.2M instead of 1200000.00
});

series.setData([
    { time: '2024-01-02', value: 1_200_000, color: '#26a69a' },
    { time: '2024-01-03', value:   900_000, color: '#ef5350' }
]);

const series = chart.addCustomSeries(myPaneView, { color: '#2196f3' });

close = (O + H + L + C) / 4
open  = (previous open + previous close) / 2      // first bar: (O + C) / 2
high  = max(H, open, close)
low   = min(L, open, close)

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();

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

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

const haBars = calculateHeikinAshi(bars);

import { LineSeries, hideSeriesPaint } from '@pipsend/charts';

// The source (candles) keeps the real OHLC and everything attached to it.
const restore = hideSeriesPaint(source);
const view = chart.addSeries(LineSeries);
view.setData(bars.map(b => ({ time: b.time, value: b.close })));

// Back to candles:
chart.removeSeries(view);
restore();

const volume = chart.addSeries(HistogramSeries, {
    priceFormat: { type: 'volume' },
    priceScaleId: ''
});

chart.priceScale('', 0).applyOptions({
    scaleMargins: { top: 0.8, bottom: 0 }   // uses the lower 20%
});

const rsi = chart.addSeries(LineSeries, { color: '#7e57c2' }, 1);

const pane = rsi.getPane().paneIndex();
chart.priceScale('right', pane).applyOptions({ /* ... */ });

// Update the last bar, or append a new one if the time is newer
series.update({ time: Math.floor(Date.now() / 1000), open: 100, high: 105, low: 95, close: 102 });

// Correct a bar that is already in the past
series.update(correctedBar, true);

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
    }
}

const timeScale = chart.timeScale();

timeScale.fitContent();                          // fit all data
timeScale.scrollToRealTime();                    // jump to the latest bar
timeScale.setVisibleRange({ from: startTime, to: endTime });
const range = timeScale.getVisibleRange();

timeScale.subscribeVisibleTimeRangeChange((range) => console.log(range));

chart.applyOptions({ localization: { timeZone: 'America/New_York' } });

chart.priceScale('right').applyOptions({
    scaleMargins: { top: 0.1, bottom: 0.2 },
    borderColor: '#2B2B43',
});

apply<Name>(series, chart, options?)

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

const chart = createChart(container);
const candles = chart.addSeries(CandlestickSeries);
candles.setData(bars);

const sma = applySMA(candles, chart, { period: 20, color: '#2196F3' });

sma.applyOptions({ period: 50, color: '#ff9800' });  // no destroy and recreate
sma.options().period;                                 // 50
sma.remove();

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

setSeriesVolumes(candles, bars);   // bars: [{ time, volume }, ...]

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

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

applyWMA(series, chart, { period: 20 });

const bb = applyBollingerBands(series, chart, { period: 20, stdDev: 2 });
bb.upper; bb.middle; bb.lower;

const kc = applyKeltnerChannels(series, chart, { period: 20, multiplier: 2 });

const dc = applyDonchianChannels(series, chart, { period: 20 });

applyParabolicSAR(series, chart, { step: 0.02, maxStep: 0.2 });

applySuperTrend(series, chart, { period: 10, multiplier: 3 });

const vwap = applyVWAP(series, chart, { anchorPeriod: 'daily', bandMultiplier: 1 });
vwap.series; vwap.upper; vwap.lower;

const ich = applyIchimoku(series, chart);
ich.conversion; ich.base; ich.spanA; ich.spanB; ich.lagging;

const pp = applyPivotPoints(series, chart, { pivotPeriod: 'daily', levels: 3 });
pp.pivot; pp.resistances; pp.supports;   // the last two are arrays

const pane = rsi.series.getPane().paneIndex();
chart.priceScale('right', pane).applyOptions({ /* ... */ });

applyRSI(series, chart, { period: 14, overbought: 70, oversold: 30 });

const macd = applyMACD(series, chart, { fastPeriod: 12, slowPeriod: 26, signalPeriod: 9 });
macd.macd; macd.signal; macd.histogram;

applyVolume(series, chart, { colorUp: '#26a69a', colorDown: '#ef5350' });

const st = applyStochastic(series, chart, { kPeriod: 14, dPeriod: 3 });
st.k; st.d;

applyOBV(series, chart, { color: '#2196F3' });

applyATR(series, chart, { period: 14 });

const adx = applyADX(series, chart, { period: 14, showDI: true });
adx.adx; adx.plusDI; adx.minusDI;

applyCCI(series, chart, { period: 20 });

applyWilliamsR(series, chart, { period: 14 });

applyMFI(series, chart, { period: 14 });

create<Name>(chart, series, options?)

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

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

sessions.applyOptions({ enabled: false });
sessions.remove();

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

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

setVolumeProfileData(volumeProfile, chartData);   // chartData: [{ time, volume }, ...]

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

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

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

const drawingManager = new DrawingToolsManager(chart, candlestickSeries, {
    enableKeyboardShortcuts: true,
    selectionColor: '#ff6b00',
    selectionLineWidth: 3
});

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

const trendLine = createTrendLineTool(
    { chart, series: candlestickSeries },
    {
        interactive: true,
        lineColor: '#2962FF',
        extendRight: true
    }
);
drawingManager.addTool(trendLine);   // returns the tool id

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

const position = createPositionTool(
    { chart, series: candlestickSeries },
    {
        entryPrice: 1.1000,
        entryTime: 1642000000,
        endTime: 1642086400,
        stopLoss: 1.0950,
        takeProfit: 1.1100,
        quantity: 1.0,
        onUpdate: (metrics) => {
            console.log('Risk (pips):', metrics.stopLossPips);
            console.log('Reward (pips):', metrics.takeProfitPips);
            console.log('R:R ratio:', metrics.riskRewardRatio);
        }
    }
);

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

const ruler = createRulerTool(
    { chart, series: candlestickSeries },
    {
        interactive: true,
        lineColor: '#2962FF',
        onUpdate: (metrics) => {
            console.log('Pips:', metrics.pips);
            console.log('Change %:', metrics.pricePercent);
            console.log('Bars:', metrics.barCount);
        }
    }
);

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

const fib = createFibonacciTool(
    { chart, series: candlestickSeries },
    {
        point1Time: startTime,
        point1Price: lowPrice,
        point2Time: endTime,
        point2Price: highPrice,
        levels: [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1],
        showLabels: true
    }
);

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

const fibExt = createFibonacciExtensionTool(
    { chart, series: candlestickSeries },
    {
        interactive: true,
        showLabels: true,
        onUpdate: () => {
            const levels = fibExt.getExtensionLevels();
            console.log('Extension levels:', levels);
        }
    }
);

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

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

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

const trendLine = createTrendLineTool(
    { chart, series: candlestickSeries },
    {
        interactive: true,
        lineColor: '#2962FF',
        lineStyle: 'solid',
        lineWidth: 2,
        extendRight: true,
        extendLeft: false
    }
);

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

const hLine = createHorizontalLineTool(
    { chart, series: candlestickSeries },
    {
        price: 1.1050,
        lineColor: '#2962FF',
        lineStyle: 'solid',
        lineWidth: 2,
        showLabel: true,
        labelText: 'Resistance'
    }
);

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

const vLine = createVerticalLineTool(
    { chart, series: candlestickSeries },
    {
        time: eventTime,
        lineColor: '#787B86',
        lineStyle: 'dashed',
        lineWidth: 1,
        showLabel: true,
        labelText: 'News Event'
    }
);

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

const arrow = createArrowTool(
    { chart, series: candlestickSeries },
    {
        interactive: true,
        lineColor: '#2962FF',
        lineWidth: 2,
        showArrowHead: true,
        showCircles: true,
        circleRadius: 4
    }
);

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

const rectangle = createRectangleTool(
    { chart, series: candlestickSeries },
    {
        interactive: true,
        fillColor: '#2962FF',
        fillOpacity: 0.2,
        borderColor: '#2962FF',
        borderWidth: 2,
        borderStyle: 'solid',
        showLabel: true,
        labelText: 'Order Block',
        labelPosition: 'top-left'
    }
);

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

const circle = createCircleTool(
    { chart, series: candlestickSeries },
    {
        interactive: true,
        fillColor: '#2962FF',
        fillOpacity: 0.1,
        borderColor: '#2962FF',
        borderWidth: 2,
        borderStyle: 'solid'
    }
);

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

const gantt = createGanttTool(
    { chart, series: candlestickSeries },
    {
        segments: [
            {
                startTime: time1,
                endTime: time2,
                level: 0,
                label: 'Analysis Phase',
                color: '#2196F3',
                category: 'planning'
            },
            {
                startTime: time2,
                endTime: time3,
                level: 1,
                label: 'Entry Zone',
                color: '#4CAF50',
                category: 'trade'
            }
        ],
        rowHeight: 40,
        rowSpacing: 5,
        fillOpacity: 0.7,
        showLabels: true
    }
);

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

const brush = createBrushTool(
    { chart, series: candlestickSeries },
    {
        color: '#2962FF',
        lineWidth: 2,
        smoothing: true,
        onComplete: () => {
            console.log('Brush stroke completed');
        }
    }
);

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

const text = createTextTool(
    { chart, series: candlestickSeries },
    {
        text: 'Important Level',
        fontSize: 14,
        textColor: '#FFFFFF',
        backgroundColor: '#2962FF',
        backgroundOpacity: 0.9,
        padding: 8,
        borderWidth: 1,
        textAlign: 'left',
        maxWidth: 200,
        time: annotationTime,
        price: annotationPrice
    }
);

{
    // Line styles
    lineColor: '#2962FF',
    lineWidth: 2,
    lineStyle: 'solid' | 'dashed' | 'dotted',

    // Fill styles
    fillColor: '#2962FF',
    fillOpacity: 0.2,

    // Border styles
    borderColor: '#2962FF',
    borderWidth: 2,
    borderStyle: 'solid' | 'dashed' | 'dotted',

    // Labels
    showLabel: true,
    labelText: 'Custom Label',
    labelPosition: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center'
}

import {
    createChart,
    CandlestickSeries,
    DrawingToolsManager,
    createPositionTool,
    createTrendLineTool,
    createFibonacciTool,
    createRectangleTool,
    createTextTool
} from '@pipsend/charts';

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

const candlestickSeries = chart.addSeries(CandlestickSeries);
candlestickSeries.setData(data);

const drawingManager = new DrawingToolsManager(chart, candlestickSeries);

// Position tool
const position = createPositionTool(
    { chart, series: candlestickSeries },
    {
        entryPrice: 1.1000,
        entryTime: data[50].time,
        stopLoss: 1.0950,
        takeProfit: 1.1100,
        onUpdate: (metrics) => {
            console.log('R:R:', metrics.riskRewardRatio);
        }
    }
);
drawingManager.addTool(position);

// Trend line (interactive)
const trendLine = createTrendLineTool(
    { chart, series: candlestickSeries },
    { interactive: true, lineColor: '#2962FF', extendRight: true }
);
drawingManager.addTool(trendLine);

// Fibonacci retracement
const fib = createFibonacciTool(
    { chart, series: candlestickSeries },
    {
        point1Time: startTime,
        point1Price: 1.0850,
        point2Time: endTime,
        point2Price: 1.1100,
        showLabels: true
    }
);
drawingManager.addTool(fib);

// Order block rectangle
const orderBlock = createRectangleTool(
    { chart, series: candlestickSeries },
    {
        interactive: true,
        fillColor: '#089981',
        fillOpacity: 0.2,
        labelText: 'Demand Zone'
    }
);
drawingManager.addTool(orderBlock);

// Text annotation
const note = createTextTool(
    { chart, series: candlestickSeries },
    {
        text: 'Key Support Level',
        fontSize: 14,
        backgroundColor: '#2962FF',
        time: noteTime,
        price: notePrice
    }
);
drawingManager.addTool(note);

import {
    createTradingLine,
    createInteractiveLineManager,
    LineStyle
} 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
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)
});

{
    price: number;                          // Required: line price
    type?: TradingLineType;                 // Preset (see above)
    title?: string;                         // Label text
    color?: string;                         // Line color
    lineWidth?: LineWidth;                  // Line width (1-4), default 2
    lineStyle?: LineStyle;                  // Solid, Dashed, etc.
    draggable?: boolean;                    // Enable dragging
    axisLabelVisible?: boolean;             // Show price on axis (default true)
    onDragStart?: (price: number) => void;  // Drag start callback
    onDragMove?: (price: number) => void;   // Drag move callback
    onDragEnd?: (price: number) => void;    // Drag end callback
    onClick?: (price: number) => void;      // Click without dragging (also for non-draggable lines)
    formatTitle?: (price: number) => string; // Dynamic title, e.g. a live P&L preview
}

const currentPrice = stopLoss.getPrice();   // Get current price
stopLoss.setPrice(93.00);                   // Update price programmatically
stopLoss.setTitle('Floating PnL: +12.50');  // Set the title immediately (bypasses formatTitle)
stopLoss.applyOptions({                     // Update options
    color: '#FF0000',
    title: 'New Stop Loss'
});
stopLoss.remove();                          // Remove line

const manager = createInteractiveLineManager(chart, series);

document.getElementById('addStopLoss').onclick = async () => {
    const line = await manager.enableClickToCreate('stop-loss');
    // The promise resolves once the user has clicked on the chart
};

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

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();

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

const markers = createSeriesMarkers(series, [
    { time: '2024-01-03', position: 'belowBar', color: 'green', shape: 'arrowUp', text: 'BUY' }
]);

markers.setMarkers([]);   // clear

createSeriesMarkers(series, [
    {
        time: '2024-01-03',
        position: 'belowBar',
        shape: 'tag',
        color: '#26a69a',
        text: 'BUY',
        textColor: '#FFFFFF',   // white by default
        borderColor: '#0f3f38', // optional
        borderRadius: 6         // 6 by default
    }
]);

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

const positionMarkers = createPositionMarkers(candleSeries, [], {
    longColors: {
        entry: '#26a69a',
        exit: '#ef5350'
    },
    shortColors: {
        entry: '#ef5350',
        exit: '#26a69a'
    },
    defaultSize: 1.5
});

positionMarkers.addPosition({
    type: 'long',
    entry: { time: entryBar.time, price: entryBar.close },
    exit: { time: exitBar.time, price: exitBar.close },
    id: 'pos-1',
    text: { entry: 'BUY', exit: 'SELL' }
});

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 })
        });
    }
});

import {
  DrawingToolsManager,
  SerializedDrawingTool,
  DrawingContext,
} from '@pipsend/charts';

// --- Serialize (save) ---
const serialized: SerializedDrawingTool[] = manager.serializeAll();
const json = JSON.stringify(serialized);
// Send `json` to backend or WebSocket

// --- Deserialize (restore) ---
const data: SerializedDrawingTool[] = JSON.parse(json);
const context: DrawingContext = { chart, series };
manager.restoreAll(context, data);

interface SerializedDrawingTool {
  type: string;
  points: Array<{ price: number; time: Time | null }>;
  style: Record<string, any>;
  extra?: Record<string, any>;
}

// Replace all tools with saved state
manager.restoreAll(context, savedTools);

// Append saved tools without clearing
manager.restoreAll(context, savedTools, false);

{
  "type": "trendLine",
  "points": [
    { "price": 1.08500, "time": 1711756800 },
    { "price": 1.09100, "time": 1711929600 }
  ],
  "style": {
    "lineColor": "#3B82F6",
    "lineWidth": 2,
    "lineStyle": "solid",
    "extendLeft": false,
    "extendRight": false
  }
}

{
  "type": "horizontalLine",
  "points": [{ "price": 1.09000, "time": null }],
  "style": {
    "lineColor": "#8B5CF6",
    "lineWidth": 2,
    "lineStyle": "solid",
    "showLabel": true,
    "labelText": "Support"
  }
}

{
  "type": "fibRetracement",
  "points": [
    { "price": 1.08750, "time": 1711843206 },
    { "price": 1.09200, "time": 1711929600 }
  ],
  "style": {
    "lineColor": "#787b86",
    "lineWidth": 1,
    "showLabels": true,
    "labelPosition": "right",
    "levelColors": { "0": "#787b86", "0.618": "#4caf50", "1": "#787b86" }
  },
  "extra": {
    "levels": [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1],
    "useExtended": false
  }
}

{
  "type": "rectangle",
  "points": [
    { "price": 1.08500, "time": 1711756800 },
    { "price": 1.09100, "time": 1711929600 }
  ],
  "style": {
    "fillColor": "#2962FF",
    "fillOpacity": 0.2,
    "borderColor": "#2962FF",
    "borderWidth": 2,
    "borderStyle": "solid",
    "showLabel": true,
    "labelText": "Zone",
    "labelPosition": "top-left"
  }
}

{
  "type": "position",
  "points": [{ "price": 1.09000, "time": 1711843200 }],
  "style": {
    "profitColor": "#26a69a",
    "lossColor": "#ef5350",
    "entryLineColor": "#ffffff",
    "opacity": 0.3,
    "showTooltips": true
  },
  "extra": {
    "endTime": 1711929600,
    "stopLoss": 1.08500,
    "takeProfit": 1.09500,
    "quantity": 1.0
  }
}

{
  "type": "text",
  "points": [{ "price": 1.08900, "time": 1711843200 }],
  "style": {
    "fontSize": 14,
    "fontFamily": "Arial, sans-serif",
    "textColor": "#FFFFFF",
    "backgroundColor": "#2962FF",
    "backgroundOpacity": 0.8,
    "padding": 8,
    "borderColor": "#2962FF",
    "borderWidth": 1,
    "textAlign": "left",
    "maxWidth": 200
  },
  "extra": { "text": "Key support level" }
}

{
  "type": "gantt",
  "points": [],
  "style": {
    "rowHeight": 40,
    "rowSpacing": 5,
    "fillOpacity": 0.7,
    "borderWidth": 2,
    "showLabels": true,
    "showGrid": true
  },
  "extra": {
    "segments": [
      {
        "startTime": 1711756800,
        "endTime": 1711929600,
        "level": 0,
        "label": "Phase 1",
        "color": "#2962FF",
        "category": "development"
      }
    ]
  }
}

async function saveTemplate(manager: DrawingToolsManager, name: string) {
  const drawings = manager.serializeAll();
  await fetch('/api/templates', {
    method: 'POST',
    body: JSON.stringify({ name, drawings, savedAt: Date.now() }),
  });
}

async function loadTemplate(manager: DrawingToolsManager, context: DrawingContext, id: string) {
  const res = await fetch(`/api/templates/${id}`);
  const { drawings } = await res.json();
  manager.restoreAll(context, drawings);
}

// Sender
ws.send(JSON.stringify({ type: 'sync', drawings: manager.serializeAll() }));

// Receiver
ws.onmessage = (e) => {
  const msg = JSON.parse(e.data);
  if (msg.type === 'sync') manager.restoreAll(context, msg.drawings);
};

// 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' },
    },
});

chart.applyOptions({
    layout: { background: { color: '#0b0e14' }, textColor: '#d1d4dc' },
    grid: { vertLines: { color: '#151922' }, horzLines: { color: '#151922' } },
});

const chart = createChart(document.getElementById('chart'), {
    layout: {
        background: { type: 'solid', color: '#0b0e14' },
        textColor: '#d1d4dc',
        fontSize: 12,
    },
    grid: {
        vertLines: { color: '#151922' },
        horzLines: { color: '#151922' },
    },
    rightPriceScale: { borderColor: '#1e222d' },
    timeScale: { borderColor: '#1e222d', rightOffset: 12 },
    crosshair: { mode: 0 },
});

const series = chart.addSeries(CandlestickSeries, {
    upColor: '#26a69a',
    downColor: '#ef5350',
    borderVisible: false,
    wickUpColor: '#26a69a',
    wickDownColor: '#ef5350',
});

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

chart.subscribeClick((param) => {
    console.log('Clicked at', param.time, param.point);
});

chart.subscribeCrosshairMove((param) => {
    if (!param.time) return;
    const bar = param.seriesData.get(series);
    console.log(param.time, bar);
});

drawingManager.subscribeSelectionChanged(({ id, ids, bounds }) => {
    // id is set only when exactly one drawing is selected; bounds boxes them all
});

drawingManager.subscribeDrawingCompleted((toolId) => {
    console.log('Finished drawing', toolId);
});

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} />;
}

<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>

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();
    }
  }
}

<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>

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);
    }
});

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

import {
    createChart,
    CandlestickSeries,
    applySMA,
    applyEMA,
    applyBollingerBands,
    applyRSI,
    applyMACD,
    applyVolume,
    setSeriesVolumes,
    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 (data: [{ time, open, high, low, close, volume }, ...])
setSeriesVolumes(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 });
});

const { createChart, CandlestickSeries, createSeriesMarkers, createPositionLine, LineStyle } = PipsendCharts;

const markers = createSeriesMarkers(series, [
    { time: candles[40].time, position: 'belowBar', shape: 'tag', color: '#26a69a', text: 'BUY' },
    { time: candles[92].time, position: 'aboveBar', shape: 'tag', color: '#ef5350', text: 'SELL' },
]);

const entryPrice = candles[candles.length - 1].close;

const position = createPositionLine(series, chart, {
    entry: {
        price: entryPrice,
        badge: '1',
        formatText: () => '+ 2.32 USD',
    },
    takeProfit: {
        price: entryPrice + 43,
        badge: '1',
        lineStyle: LineStyle.Solid,
        formatText: (price) => `+ ${((price - entryPrice) * 1).toFixed(2)} USD`,
    },
    stopLoss: {
        price: entryPrice - 41,
        badge: '1',
        lineStyle: LineStyle.Solid,
        formatText: (price) => `- ${Math.abs((price - entryPrice)).toFixed(2)} USD`,
    },
    onDragEnd: (level, price) => console.log(level, 'moved to', price.toFixed(2)),
    onClose: (level) => console.log(level, 'closed'),
    onClick: (level) => console.log(level, 'clicked'),
});

position.applyOptions({ connectorVisible: false });   // hide the connector

const indicators = { sma: null, rsi: null };

function toggleSMA() {
    if (indicators.sma) {
        indicators.sma.remove();
        indicators.sma = null;
    } else {
        indicators.sma = applySMA(series, chart, { period: 20, color: '#2962FF', lineWidth: 2 });
    }
}

function toggleRSI() {
    if (indicators.rsi) {
        indicators.rsi.remove();
        indicators.rsi = null;
    } else {
        indicators.rsi = applyRSI(series, chart, { period: 14, color: '#9C27B0' });
    }
}

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

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

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

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

const chart: IChartApi = createChart(container);
const series: ISeriesApi<"Candlestick"> = chart.addSeries(CandlestickSeries);

rm -rf node_modules package-lock.json
npm install
npm list @pipsend/charts

const canvas = chart.takeScreenshot();
const image = canvas.toDataURL('image/png');

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