const fibGroup = new QFChart.ToolGroup({
  name: 'Fibonacci Tools',
  icon: `<svg>...</svg>`,
});
fibGroup.add(new QFChart.FibonacciTool());
fibGroup.add(new QFChart.FibonacciChannelTool());
fibGroup.add(new QFChart.FibTrendExtensionTool());
fibGroup.add(new QFChart.FibSpeedResistanceFanTool());
chart.registerPlugin(fibGroup);

const patternGroup = new QFChart.ToolGroup({
  name: 'Patterns',
  icon: `<svg>...</svg>`,
});
patternGroup.add(new QFChart.XABCDPatternTool());
patternGroup.add(new QFChart.ABCDPatternTool());
patternGroup.add(new QFChart.CypherPatternTool());
patternGroup.add(new QFChart.HeadAndShouldersTool());
patternGroup.add(new QFChart.TrianglePatternTool());
patternGroup.add(new QFChart.ThreeDrivesPatternTool());
chart.registerPlugin(patternGroup);

protected onInit(): void {
  this.context.registerDrawingRenderer(new MyDrawingRenderer());
}

npm install @qfo/qfchart@latest echarts

<script src="proxy.php?url=https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script src="proxy.php?url=https://cdn.jsdelivr.net/npm/@qfo/qfchart/dist/qfchart.min.browser.js"></script>

//@version=6
indicator("Supply & Demand Zones", overlay=true)

var box supplyZone = na
var box demandZone = na

// Draw a supply zone when we make a higher high
if ta.crossover(close, ta.highest(high, 20)[1])
    supplyZone := box.new(
        left    = bar_index - 10,
        top     = ta.highest(high, 10),
        right   = bar_index,
        bottom  = ta.highest(high, 10) - ta.atr(14),
        bgcolor = color.new(color.red, 80),
        border_color = color.red,
        border_width = 1,
        text    = "Supply",
        text_color = color.red,
        text_size  = size.small
    )

// Draw a demand zone on a lower low
if ta.crossunder(close, ta.lowest(low, 20)[1])
    demandZone := box.new(
        left    = bar_index - 10,
        top     = ta.lowest(low, 10) + ta.atr(14),
        right   = bar_index,
        bottom  = ta.lowest(low, 10),
        bgcolor = color.new(color.green, 80),
        border_color = color.green,
        border_width = 1,
        text    = "Demand",
        text_color = color.green,
        text_size  = size.small
    )

//@version=6
indicator("Indicator Dashboard", overlay=true)

rsi  = ta.rsi(close, 14)
macd_line = ta.ema(close, 12) - ta.ema(close, 26)
atr  = ta.atr(14)

var table dashboard = table.new(
    position   = position.top_right,
    columns    = 2,
    rows       = 4,
    bgcolor    = color.new(color.black, 70),
    border_color = color.gray,
    border_width = 1
)

// Header row
table.cell(dashboard, 0, 0, "Indicator", text_color=color.white, text_size=size.small)
table.cell(dashboard, 1, 0, "Value",     text_color=color.white, text_size=size.small)

// RSI row
rsiColor = rsi > 70 ? color.red : rsi < 30 ? color.green : color.white
table.cell(dashboard, 0, 1, "RSI(14)",   text_color=color.gray,  text_size=size.small)
table.cell(dashboard, 1, 1, str.tostring(math.round(rsi, 2)),
           text_color=rsiColor, text_size=size.small)

// MACD row
macdColor = macd_line >= 0 ? color.green : color.red
table.cell(dashboard, 0, 2, "MACD",      text_color=color.gray,  text_size=size.small)
table.cell(dashboard, 1, 2, str.tostring(math.round(macd_line, 4)),
           text_color=macdColor, text_size=size.small)

// ATR row
table.cell(dashboard, 0, 3, "ATR(14)",   text_color=color.gray,  text_size=size.small)
table.cell(dashboard, 1, 3, str.tostring(math.round(atr, 2)),    text_size=size.small)

//@version=6
indicator("Pivot Path", overlay=true)

// Collect recent pivot highs and connect them with a polyline
var pivotPoints = array.new<chart.point>()

ph = ta.pivothigh(high, 5, 5)
if not na(ph)
    array.push(pivotPoints, chart.point.from_index(bar_index[5], ph))
    if array.size(pivotPoints) > 6
        array.shift(pivotPoints)

var polyline pvLine = na
if barstate.islast and array.size(pivotPoints) >= 2
    polyline.delete(pvLine)
    pvLine := polyline.new(
        points       = pivotPoints,
        curved       = false,
        closed       = false,
        line_color   = color.new(color.orange, 0),
        line_width   = 2
    )

//@version=6
indicator("Enum Signal Labels", overlay=true)
enum Signal
    Buy
    Sell
    Neutral
getSignal(rsi) =>
    if rsi < 30
        Signal.Buy
    else if rsi > 70
        Signal.Sell
    else
        Signal.Neutral
rsi = ta.rsi(close, 14)
sig = getSignal(rsi)
if sig == Signal.Buy
    label.new(bar_index, low, "BUY", color=color.green, textcolor=color.white, style=label.style_label_up, size=size.small)
if sig == Signal.Sell
    label.new(bar_index, high, "SELL", color=color.red, textcolor=color.white, style=label.style_label_down, size=size.small)

//@version=6
indicator("Type Casts", overlay=true)

x = 3.7
i = int(x)      // Cast to integer (truncates)
f = float(i)    // Cast back to float
s = string(str.tostring(i))  // Convert to string for table/label display

plot(i, "Int Value")

//@version=6
indicator("Conditional TA", overlay=true)

// This now correctly calculates even though sma is only needed sometimes
useEma = input.bool(true, "Use EMA")

result = if useEma
    ta.ema(close, 20)
else
    ta.sma(close, 20)  // Window now stays consistent even when this branch is inactive

plot(result, "MA")

//@version=6
indicator("OBV in Condition", overlay=true)

obv = ta.obv  // Always evaluated now, even if used inside an if block
signal = ta.ema(obv, 10)

// This correctly reflects the full OBV history
if barstate.islast
    label.new(bar_index, obv, str.tostring(math.round(obv)))

//@version=6
indicator("Round Test")

// Pine Script: math.round(-0.5) = -1
// JavaScript:  Math.round(-0.5) = 0  ← was incorrectly using this
plot(math.round(-1.5), "Round -1.5")  // Correctly returns -2
plot(math.round(1.5),  "Round 1.5")   // Correctly returns 2

//@version=6
indicator("MTF Example")

// syminfo.tickerId returns "BINANCE:BTCUSDT" from the Binance provider
// request.security now correctly resolves this to "BTCUSDT"
weeklyClose = request.security(syminfo.tickerId, "1W", close)
plot(weeklyClose, "Weekly Close")

//@version=6
indicator("MTF Bollinger Bands", overlay=true)

[wMid, wUpper, wLower] = request.security(
    syminfo.tickerId, "1D",
    ta.bb(close, 20, 2.0)
)

plot(wMid,   "Daily BB Mid",   color=color.blue)
plot(wUpper, "Daily BB Upper", color=color.red)
plot(wLower, "Daily BB Lower", color=color.green)
fill(plot(wUpper, display=display.none), plot(wLower, display=display.none),
     color=color.new(color.blue, 90))

npm install pinets@latest

npm install -g pinets-cli
pinets run my_indicator.pine --symbol BTCUSDT --timeframe 1D

// Standalone: Heikin Ashi candles as an overlay
const heikinAshiData = [
    { time: 1700000000000, value: [50000, 51000, 49500, 50500] },
    { time: 1700086400000, value: [50500, 52000, 50000, 51800] },
    { time: 1700172800000, value: [51800, 53000, 51200, 52600] },
    { time: 1700259200000, value: [52600, 53500, 51800, 52000] },
    { time: 1700345600000, value: [52000, 52800, 50800, 51200] },
];

chart.addIndicator('HA', {
    ha: {
        data: heikinAshiData,
        options: {
            style: 'candle',
            color: '#26a69a',   <em>// Bullish body fill</em>
            wickcolor: '#1a7a6e',
            bordercolor: '#145f57',
        },
    },
}, { overlay: true });

// Standalone: conditional candle coloring
const haTrend = [
    {
        time: 1700000000000,
        value: [50000, 51000, 49500, 50500],
        options: { color: '#26a69a', wickcolor: '#1a7a6e' }, <em>// Bullish</em>
    },
    {
        time: 1700086400000,
        value: [50500, 52000, 50000, 51800],
        options: { color: '#26a69a', wickcolor: '#1a7a6e' }, <em>// Bullish</em>
    },
    {
        time: 1700172800000,
        value: [51800, 53000, 51200, 52600],
        options: { color: '#ef5350', wickcolor: '#b71c1c' }, <em>// Bearish reversal</em>
    },
];

chart.addIndicator('HA_Trend', {
    candles: { data: haTrend, options: { style: 'candle', color: '#888' } },
}, { overlay: true });

//@version=6
indicator("Heikin Ashi", overlay=true)

haClose = (open + high + low + close) / 4
haOpen = float(na)
haOpen := na(haOpen[1]) ? (open + close) / 2 : (haOpen[1] + haClose[1]) / 2
haHigh = math.max(high, math.max(haOpen, haClose))
haLow  = math.min(low,  math.min(haOpen, haClose))

isBull = haClose > haOpen
clr = isBull ? color.teal : color.red

plotcandle(haOpen, haHigh, haLow, haClose, "HA", color=clr, wickcolor=clr)

// Feed PineTS output to QFChart
const pineTS = new PineTS(Provider.Binance, 'BTCUSDT', '60', null, startTime, endTime);
const { plots } = await pineTS.run(pineScript);

// PineTS emits plotcandle as style:'candle' with per-point color overrides
chart.addIndicator('HA', plots, { overlay: true });

// Standalone: OHLC bars in a separate pane
const ohlcData = [
    { time: 1700000000000, value: [50000, 51000, 49500, 50500] },
    { time: 1700086400000, value: [50500, 52000, 50000, 51800] },
    { time: 1700172800000, value: [51800, 53000, 51200, 52600] },
];

chart.addIndicator('OHLC_Bars', {
    bars: {
        data: ohlcData,
        options: {
            style: 'bar',
            color: '#888888',
            wickcolor: '#555555',
        },
    },
}, { overlay: false, height: 20 });

// Standalone: color candles based on a condition
const marketData = [
    { time: 1700000000000, open: 50000, high: 51000, low: 49500, close: 50500, volume: 100 },
    { time: 1700086400000, open: 50500, high: 52000, low: 50000, close: 51800, volume: 140 },
    { time: 1700172800000, open: 51800, high: 52200, low: 50900, close: 51200, volume: 80 },
    { time: 1700259200000, open: 51200, high: 51800, low: 50000, close: 50400, volume: 120 },
    { time: 1700345600000, open: 50400, high: 51200, low: 49800, close: 51000, volume: 110 },
];

chart.setMarketData(marketData);

// Color candles based on whether volume is above average.
// The `value` field is not displayed — barcolor only uses per-point `options.color`
// to recolor the main candle. When `options.color` is absent, the candle keeps its
// default color. Any numeric value (e.g. 0) satisfies the data point requirement.
const volumeColors = {
    trend: {
        data: [
            { time: 1700000000000, value: 0 },                                      // No override — default candle color
            { time: 1700086400000, value: 0, options: { color: '#ff9800' } },       // High volume → orange
            { time: 1700172800000, value: 0 },                                      // No override
            { time: 1700259200000, value: 0, options: { color: '#ff9800' } },       // High volume → orange
            { time: 1700345600000, value: 0 },                                      // No override
        ],
        options: { style: 'barcolor', color: '#888888' },
    },
};

chart.addIndicator('Volume_Color', volumeColors, { overlay: false });

//@version=6
indicator("RSI Bar Color", overlay=true)

rsi = ta.rsi(close, 14)
barcolor(rsi > 70 ? color.red : rsi < 30 ? color.green : na, title="RSI Color")

const { plots } = await pineTS.run(pineScript);
// plots['RSI Color'] will have style: 'barcolor'
chart.addIndicator('RSI_Color', plots, { overlay: true });

// Standalone: display volume ratio in tooltip only
const volumeRatioData = [
    { time: 1700000000000, value: 1.25 }, // 25% above average
    { time: 1700086400000, value: 1.62 }, // 62% above average
    { time: 1700172800000, value: 0.73 }, // Below average
    { time: 1700259200000, value: 0.91 }, // Below average
    { time: 1700345600000, value: 1.08 }, // Slightly above average
];

chart.addIndicator('Volume_Stats', {
    volRatio: {
        data: volumeRatioData,
        options: { style: 'char', color: '#888888' },
    },
}, { overlay: true });

// Standalone: Bollinger Bands with fill
const now = 1700000000000;
const interval = 86400000; // 1 day

const bbPlots = {
    upper: {
        data: [
            { time: now + 0 * interval, value: 52000 },
            { time: now + 1 * interval, value: 52400 },
            { time: now + 2 * interval, value: 52800 },
            { time: now + 3 * interval, value: 52500 },
        ],
        options: { style: 'line', color: '#2196F3', linewidth: 1 },
    },
    basis: {
        data: [
            { time: now + 0 * interval, value: 50500 },
            { time: now + 1 * interval, value: 50700 },
            { time: now + 2 * interval, value: 51000 },
            { time: now + 3 * interval, value: 50800 },
        ],
        options: { style: 'line', color: '#FFC107', linewidth: 2 },
    },
    lower: {
        data: [
            { time: now + 0 * interval, value: 49000 },
            { time: now + 1 * interval, value: 49000 },
            { time: now + 2 * interval, value: 49200 },
            { time: now + 3 * interval, value: 49100 },
        ],
        options: { style: 'line', color: '#2196F3', linewidth: 1 },
    },
    // Fill between upper and lower bands — references plot keys by name
    bbFill: {
        plot1: 'upper',
        plot2: 'lower',
        options: { style: 'fill', color: 'rgba(33, 150, 243, 0.15)' },
    },
};

chart.addIndicator('BB_20', bbPlots, { overlay: true });

//@version=6
indicator("Bollinger Bands", overlay=true)
length = input.int(20, "Length")
mult  = input.float(2.0, "Multiplier")

[middle, upper, lower] = ta.bb(close, length, mult)

plot(middle, "Basis", color=color.yellow, linewidth=2)
p1 = plot(upper, "Upper", color=color.blue, linewidth=1)
p2 = plot(lower, "Lower", color=color.blue, linewidth=1)
fill(p1, p2, title="BB Fill", color=color.new(color.blue, 85))

const { plots } = await pineTS.run(pineScript);
// PineTS emits: plots['Basis'], plots['Upper'], plots['Lower'], plots['BB Fill']
// plots['BB Fill'] = { plot1: 'Upper', plot2: 'Lower', options: { style: 'fill', color: ... } }
chart.addIndicator('BB_20', plots, { overlay: true });

// Standalone: Keltner Channels with dual fills
const kcPlots = {
    upper:  { data: upperData,  options: { style: 'line', color: '#4CAF50', linewidth: 1 } },
    middle: { data: middleData, options: { style: 'line', color: '#FFC107', linewidth: 2 } },
    lower:  { data: lowerData,  options: { style: 'line', color: '#F44336', linewidth: 1 } },
    fillUp: {
        plot1: 'middle',
        plot2: 'upper',
        options: { style: 'fill', color: 'rgba(76, 175, 80, 0.12)' },
    },
    fillDown: {
        plot1: 'middle',
        plot2: 'lower',
        options: { style: 'fill', color: 'rgba(244, 67, 54, 0.12)' },
    },
};

chart.addIndicator('KC_20', kcPlots, { overlay: true });

// Standalone: BUY/SELL labels at specific price levels
const marketData = [
    { time: 1700000000000, open: 50000, high: 51000, low: 49000, close: 50500, volume: 100 },
    { time: 1700086400000, open: 50500, high: 52000, low: 50000, close: 51800, volume: 140 },
    { time: 1700172800000, open: 51800, high: 53000, low: 51000, close: 52500, volume: 150 },
    { time: 1700259200000, open: 52500, high: 53500, low: 51500, close: 52000, volume: 130 },
    { time: 1700345600000, open: 52000, high: 52500, low: 50500, close: 51000, volume: 110 },
];

chart.setMarketData(marketData);

chart.addIndicator('Signals', {
    __labels__: {
        data: [{
            time: marketData[0].time,
            value: [
                {
                    x: 1, y: 51800,
                    text: 'BUY',
                    xloc: 'bar_index',
                    yloc: 'price',
                    color: '#26a69a',
                    style: 'style_label_up',
                    textcolor: '#ffffff',
                    size: 'normal',
                    _deleted: false,
                },
                {
                    x: 4, y: 51000,
                    text: 'SELL',
                    xloc: 'bar_index',
                    yloc: 'price',
                    color: '#ef5350',
                    style: 'style_label_down',
                    textcolor: '#ffffff',
                    size: 'normal',
                    _deleted: false,
                },
            ],
            options: { style: 'label' },
        }],
        options: { style: 'label', overlay: true },
    },
}, { overlay: true });

// Standalone: signal arrows above/below bars (y is ignored with yloc)
chart.addIndicator('Arrows', {
    __labels__: {
        data: [{
            time: marketData[0].time,
            value: [
                {
                    x: 1, y: 0,         // y ignored for yloc:'belowbar'
                    text: '▲',
                    xloc: 'bar_index',
                    yloc: 'belowbar',
                    color: '#26a69a',
                    style: 'style_none',
                    textcolor: '#26a69a',
                    size: 'large',
                    _deleted: false,
                },
                {
                    x: 3, y: 0,         // y ignored for yloc:'abovebar'
                    text: '▼',
                    xloc: 'bar_index',
                    yloc: 'abovebar',
                    color: '#ef5350',
                    style: 'style_none',
                    textcolor: '#ef5350',
                    size: 'large',
                    _deleted: false,
                },
            ],
            options: { style: 'label' },
        }],
        options: { style: 'label', overlay: true },
    },
}, { overlay: true });

//@version=6
indicator("EMA Cross Labels", overlay=true)

fast = ta.ema(close, 9)
slow = ta.ema(close, 21)

crossUp   = ta.crossover(fast, slow)
crossDown = ta.crossunder(fast, slow)

if crossUp
    label.new(bar_index, low, "Buy",
        xloc=xloc.bar_index, yloc=yloc.belowbar,
        color=color.teal, style=label.style_label_up,
        textcolor=color.white)

if crossDown
    label.new(bar_index, high, "Sell",
        xloc=xloc.bar_index, yloc=yloc.abovebar,
        color=color.red, style=label.style_label_down,
        textcolor=color.white)

plot(fast, "Fast EMA", color=color.teal)
plot(slow, "Slow EMA", color=color.red)

const { plots } = await pineTS.run(pineScript);
// plots includes 'Fast EMA', 'Slow EMA' (line style) + '__labels__' (label style)
chart.addIndicator('EMA_Cross', plots, { overlay: true });

// Standalone: trend lines on a chart
const marketData = [
    { time: 1700000000000, open: 50000, high: 51000, low: 49000, close: 50500, volume: 100 },
    { time: 1700086400000, open: 50500, high: 52000, low: 50000, close: 51800, volume: 140 },
    { time: 1700172800000, open: 51800, high: 53000, low: 51000, close: 52500, volume: 150 },
    { time: 1700259200000, open: 52500, high: 53500, low: 51500, close: 52000, volume: 130 },
    { time: 1700345600000, open: 52000, high: 52500, low: 50500, close: 51000, volume: 110 },
];

chart.setMarketData(marketData);

chart.addIndicator('Trend', {
    __lines__: {
        data: [{
            time: marketData[0].time,
            value: [
                // Uptrend line connecting lows — extends to the right
                {
                    x1: 0, y1: 49000,
                    x2: 2, y2: 51000,
                    xloc: 'bar_index',
                    extend: 'right',
                    color: '#26a69a',
                    style: 'style_solid',
                    width: 2,
                    _deleted: false,
                },
                // Horizontal resistance — dashed, no extension
                {
                    x1: 0, y1: 53500,
                    x2: 4, y2: 53500,
                    xloc: 'bar_index',
                    extend: 'none',
                    color: '#ef5350',
                    style: 'style_dashed',
                    width: 1,
                    _deleted: false,
                },
            ],
            options: { style: 'drawing_line' },
        }],
        options: { style: 'drawing_line', overlay: true },
    },
}, { overlay: true });

// Standalone: support and resistance levels extending across the full chart
chart.addIndicator('Levels', {
    __lines__: {
        data: [{
            time: marketData[0].time,
            value: [
                {
                    x1: 0, y1: 49000, x2: 1, y2: 49000,
                    xloc: 'bar_index', extend: 'both',
                    color: '#26a69a', style: 'style_dotted', width: 1,
                    _deleted: false,
                },
                {
                    x1: 0, y1: 53500, x2: 1, y2: 53500,
                    xloc: 'bar_index', extend: 'both',
                    color: '#ef5350', style: 'style_dotted', width: 1,
                    _deleted: false,
                },
            ],
            options: { style: 'drawing_line' },
        }],
        options: { style: 'drawing_line', overlay: true },
    },
}, { overlay: true });

//@version=6
indicator("Support & Resistance", overlay=true)

// Draw a horizontal line at each pivot high/low
ph = ta.pivothigh(high, 5, 5)
pl = ta.pivotlow(low,  5, 5)

if not na(ph)
    line.new(bar_index[5], ph, bar_index, ph,
        xloc=xloc.bar_index, extend=extend.right,
        color=color.red, style=line.style_dashed, width=1)

if not na(pl)
    line.new(bar_index[5], pl, bar_index, pl,
        xloc=xloc.bar_index, extend=extend.right,
        color=color.green, style=line.style_dashed, width=1)

const { plots } = await pineTS.run(pineScript);
// plots['__lines__'] contains all line objects as a single aggregated entry
chart.addIndicator('SR_Levels', plots, { overlay: true });

// Standalone: ascending price channel with fill</em>
const upperLine = {
    x1: 0, y1: 51000, x2: 4, y2: 54000,
    xloc: 'bar_index', extend: 'none',
    color: '#2196F3', style: 'style_solid', width: 2,
    _deleted: false,
};

const lowerLine = {
    x1: 0, y1: 49000, x2: 4, y2: 51500,
    xloc: 'bar_index', extend: 'none',
    color: '#2196F3', style: 'style_solid', width: 2,
    _deleted: false,
};

chart.addIndicator('Channel', {
    // Visible boundary lines</em>
    __lines__: {
        data: [{
            time: marketData[0].time,
            value: [upperLine, lowerLine],
            options: { style: 'drawing_line' },
        }],
        options: { style: 'drawing_line', overlay: true },
    },
    // Polygon fill between the two lines</em>
    __linefills__: {
        data: [{
            time: marketData[0].time,
            value: [{
                line1: upperLine,
                line2: lowerLine,
                color: 'rgba(33, 150, 243, 0.15)',
                _deleted: false,
            }],
            options: { style: 'linefill' },
        }],
        options: { style: 'linefill', overlay: true },
    },
}, { overlay: true });