Syntax

Built-in Functions

Structures

Built-in Variables

KLineChart

This function is used for custom charting during strategy runtime, using a drawing method similar to the Pine language.


    
    
    
KLineChart(options)

Examples

To draw on the strategy's custom charting area, you must have a chart control object, created using the KLineChart() function. The parameter of the KLineChart() function is a chart configuration structure. The chart structure used in the reference code is very simple: {overlay: true}.

This chart configuration structure only sets the drawing content to be output on the main chart. If overlay is set to a false value, such as false, all content on the chart will be output on the sub-chart. If you need to specify a particular drawing function to bindbindoutput on the main chart, you can also specify the overlay parameter as a true value in the specific function call, such as true.


    javascript
    
    
function main() {
    // Call KLineChart function to create chart control object c
    let c = KLineChart({
        overlay: true
    })

    // Use spot exchange object for testing, get K-line data. If using futures exchange object for testing, you need to set the contract first
    let bars = exchange.GetRecords()
    if (!bars) {
        return
    }

    // Iterate over K-line data to perform drawing operations. Drawing operations must start with ```c.begin(bar)``` function call and end with ```c.close(bar)``` function call.
    bars.forEach(function(bar, index) {
        c.begin(bar)
        c.barcolor(bar.Close > bar.Open ? 'rgba(255, 0, 0, 0.2)' : 'rgba(0, 0, 0, 0.2)')
        if (bar.Close > bar.Open) {
            c.bgcolor('rgba(0, 255, 0, 0.5)')
        }
        let h = c.plot(bar.High, 'high')
        let l = c.plot(bar.Low, 'low')

        c.fill(h, l, {
            color: bar.Close > bar.Open ? 'rgba(255, 0, 0, 0.2)' : 'rgba(255, 0, 0, 0.2)'
        })
        c.hline(bar.High)
        c.plotarrow(bar.Close - bar.Open)
        c.plotshape(bar.Low, {
            style: 'diamond'
        })
        c.plotchar(bar.Close, {
            char: 'X'
        })
        c.plotcandle(bar.Open*0.9, bar.High*0.9, bar.Low*0.9, bar.Close*0.9)
        if (bar.Close > bar.Open) {
            // long/short/closelong/closeshort
            c.signal("long", bar.High, 1.5)
        } else if (bar.Close < bar.Open) {
            c.signal("closelong", bar.Low, 1.5)
        }
        c.close(bar)
    })
}


    python
    
    
def main():
    # Call KLineChart function to create chart control object c
    c = KLineChart({
        "overlay": True
    })

    # Use spot exchange object for testing, get K-line data. If using futures exchange object for testing, you need to set the contract first
    bars = exchange.GetRecords()
    if not bars:
        return

    for bar in bars:
        c.begin(bar)
        c.barcolor('rgba(255, 0, 0, 0.2)' if bar.Close > bar.Open else 'rgba(0, 0, 0, 0.2)')
        if bar.Close > bar.Open:
            c.bgcolor('rgba(0, 255, 0, 0.5)')

        h = c.plot(bar.High, 'high')
        l = c.plot(bar.Low, 'low')

        c.fill(h, l, 'rgba(255, 0, 0, 0.2)' if bar.Close > bar.Open else 'rgba(255, 0, 0, 0.2)')
        c.hline(bar.High)
        c.plotarrow(bar.Close - bar.Open)
        c.plotshape(bar.Low, style = 'diamond')
        c.plotchar(bar.Close, char = 'X')
        c.plotcandle(bar.Open*0.9, bar.High*0.9, bar.Low*0.9, bar.Close*0.9)
        if bar.Close > bar.Open:
            # long/short/closelong/closeshort
            c.signal("long", bar.High, 1.5)
        elif bar.Close < bar.Open:
            c.signal("closelong", bar.Low, 1.5)

        c.close(bar)


    c++
    
    
// Not supported currently

Use the pricePrecision and volumePrecision parameters to control chart data precision. You can set the display precision for price and volume according to actual needs. For example, for instruments with large price fluctuations, you can set it to 0 to display integers, while for instruments requiring precise prices, you can set it to 2 or higher precision.


    javascript
    
    
function main() {
    // Create chart control object, set price precision to 0 (integer), volume precision to 0 (integer)
    let c = KLineChart({
        overlay: true,
        pricePrecision: 0,   // Price data precision, set to 2 to keep 2 decimal places
        volumePrecision: 0   // Volume data precision
    })

    // Select appropriate trading pair based on exchange type
    let symbol = exchange.GetName().includes("Futures_") ? "ETH_USDT.swap" : "ETH_USDT"
    Log("Test symbol:", symbol)

    // Get K-line data
    let bars = exchange.GetRecords(symbol)
    if (!bars) {
        return
    }

    // Iterate through K-line data and draw chart
    bars.forEach(function(bar, index) {
        c.begin(bar)
        c.barcolor(bar.Close > bar.Open ? 'rgba(255, 0, 0, 0.2)' : 'rgba(0, 0, 0, 0.2)')
        c.plot(bar.High, 'high')
        c.plot(bar.Low, 'low')
        c.close(bar)
    })
}


    python
    
    
def main():
    # Create chart control object, set price precision to 0 (integer), volume precision to 0 (integer)
    c = KLineChart({
        "overlay": True,
        "pricePrecision": 0,   # Price data precision, set to 2 to keep 2 decimal places
        "volumePrecision": 0   # Volume data precision
    })

    # Select appropriate trading pair based on exchange type
    exName = exchange.GetName()
    symbol = "ETH_USDT.swap" if "Futures_" in exName else "ETH_USDT"
    Log("Test symbol:", symbol)

    # Get K-line data
    bars = exchange.GetRecords(symbol)
    if not bars:
        return

    # Iterate through K-line data and draw chart
    for bar in bars:
        c.begin(bar)
        c.barcolor('rgba(255, 0, 0, 0.2)' if bar.Close > bar.Open else 'rgba(0, 0, 0, 0.2)')
        c.plot(bar.High, 'high')
        c.plot(bar.Low, 'low')
        c.close(bar)


    c++
    
    
// Not supported currently

The Pine language charting interface functions supported in bindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindbindcharting operations include:

barcolor, used to set K-line color.

barcolor(color, offset, editable, show_last, title, display)

Optional values for display parameter: "none", "all"
```
    javascript
    
    
c.barcolor(bar.Close > bar.Open ? 'rgba(255, 0, 0, 0.2)' : 'rgba(0, 0, 0, 0.2)')   // Using the example from the reference code in this example, no further elaboration needed
```
```
    python
    
    
c.barcolor('rgba(255, 0, 0, 0.2)' if bar.Close > bar.Open else 'rgba(0, 0, 0, 0.2)')
```
```
    c++
    
    
// Not supported currently
```
bgcolor, used to fill the K-line background with a specified color.

bgcolor(color, offset, editable, show_last, title, display, overlay)

Optional values for display parameter: "none", "all"
```
    javascript
    
    
c.bgcolor('rgba(0, 255, 0, 0.5)')
```
```
    python
    
    
c.bgcolor('rgba(0, 255, 0, 0.5)')
```
```
    c++
    
    
// Not supported currently
```

plot, plots a series of data on the chart.

plot(series, title, color, linewidth, style, trackprice, histbase, offset, join, editable, show_last, display)
style parameter options: "stepline_diamond", "stepline", "cross", "areabr", "area", "circles", "columns", "histogram", "linebr", "line"
display parameter options: "none", "all"


    javascript
    
    
c.plot(bar.High, 'high')
c.plot(bar.Open < bar.Close ? NaN : bar.Close, "Close", {style: "linebr"})  // Supports plotting discontinuous data lines


    python
    
    
h = c.plot(bar.High, 'high')
h = c.plot(None if bar.Open < bar.Close else bar.Close, "Close", style = "linebr")  # Supports plotting discontinuous data lines


    c++
    
    
// Not supported yet

fill, fills the background area between two plots or hline with the specified color.

fill(hline1, hline2, color, title, editable, fillgaps, display)
display parameter options: "none", "all"

Since JavaScript does not support specifying parameters by function parameter names, to solve this problem, you can use the {key: value} structure to specify parameters for specific parameter names. For example, in the reference code, {color: bar.Close > bar.Open ? 'rgba(255, 0, 0, 0.2)' : 'rgba(255, 0, 0, 0.2)'} is used to specify the color parameter of the fill function.

If you need to specify multiple parameters by parameter names consecutively, you can use the {key1: value1, key2: value2, key3: value3} format.

For example, to add a title parameter in this example: {color: bar.Close > bar.Open ? 'rgba(255, 0, 0, 0.2)' : 'rgba(255, 0, 0, 0.2)', title: 'fill'}.

Color values can be set using the 'rgba(255, 0, 0, 0.2)' format or the '#FF0000' format.
```
    javascript
    
    
let h = c.plot(bar.High, 'high')
let l = c.plot(bar.Low, 'low')
c.fill(h, l, {color: bar.Close > bar.Open ? 'rgba(255, 0, 0, 0.2)' : 'rgba(255, 0, 0, 0.2)'})
```
```
    python
    
    
h = c.plot(bar.High, 'high')
l = c.plot(bar.Low, 'low')
c.fill(h, l, color = 'rgba(255, 0, 0, 0.2)' if bar.Close > bar.Open else 'rgba(255, 0, 0, 0.2)')
```
```
    c++
    
    
// Not supported yet
```
hline, draws a horizontal line at the specified fixed price level.

hline(price, title, color, linestyle, linewidth, editable, display)
linestyle parameter options: "dashed", "dotted", "solid"
display parameter options: "none", "all"
```
    javascript
    
    
c.hline(bar.High)
```
```
    python
    
    
c.hline(bar.High)
```
```
    c++
    
    
// Not supported yet
```
plotarrow, plots up and down arrows on the chart.

plotarrow(series, title, colorup, colordown, offset, minheight, maxheight, editable, show_last, display)
display parameter options: "none", "all"
```
    javascript
    
    
c.plotarrow(bar.Close - bar.Open)
```
```
    python
    
    
c.plotarrow(bar.Close - bar.Open)
```
```
    c++
    
    
// Not supported yet
```
plotshape, draws visual shapes on the chart.

plotshape(series, title, style, location, color, offset, text, textcolor, editable, size, show_last, display)
style parameter options: "diamond", "square", "label_down", "label_up", "arrow_down", "arrow_up", "circle", "flag", "triangle_down", "triangle_up", "cross", "xcross"
location parameter options: "abovebar", "belowbar", "top", "bottom", "absolute"
size parameter options: "10px", "14px", "20px", "40px", "80px", corresponding to size.tiny, size.small, size.normal, size.large, size.huge in Pine language
size.auto is equivalent to size.small.
display parameter options: "none", "all"
```
    javascript
    
    
c.plotshape(bar.Low, {style: 'diamond'})
```
```
    python
    
    
c.plotshape(bar.Low, style = 'diamond')
```
```
    c++
    
    
// Not supported yet
```
plotchar, draws visual shapes on the chart using any Unicode character.

plotchar(series, title, char, location, color, offset, text, textcolor, editable, size, show_last, display)
location parameter options: "abovebar", "belowbar", "top", "bottom", "absolute"
size parameter options: "10px", "14px", "20px", "40px", "80px", corresponding to size.tiny, size.small, size.normal, size.large, size.huge in Pine language
size.auto is equivalent to size.small.
display parameter options: "none", "all"
```
    javascript
    
    
c.plotchar(bar.Close, {char: 'X'})
```
```
    python
    
    
c.plotchar(bar.Close, char = 'X')
```
```
    c++
    
    
// Not supported yet
```

plotcandle, draws candlestick chart on the chart.

plotcandle(open, high, low, close, title, color, wickcolor, editable, show_last, bordercolor, display)
display parameter options: "none", "all"


    javascript
    
    
c.plotcandle(bar.Open*0.9, bar.High*0.9, bar.Low*0.9, bar.Close*0.9)


    python
    
    
c.plotcandle(bar.Open*0.9, bar.High*0.9, bar.Low*0.9, bar.Close*0.9)


    c++
    
    
// Not supported yet

signal, this function does not exist in Pine language, used to draw buy/sell signals.

signal(direction, price, qty, id)

The parameter "long" indicates the trade direction, with options: "long", "closelong", "short", "closeshort". The parameter bar.High specifies the Y-axis position of the signal marker.
The parameter 1.5 represents the trade quantity of the signal. A fourth parameter can be passed to replace the default displayed text content. The default text of the signal marker is the trade direction, for example: "closelong".
```
    javascript
    
    
c.signal("long", bar.High, 1.5)
```
```
    python
    
    
c.signal("long", bar.High, 1.5)
```
```
    c++
    
    
// Not supported yet
```
reset, this function does not exist in Pine language, used to clear chart data.

reset(remain)

The reset() method accepts a parameter remain to specify the number of data bars to retain. Not passing the remain parameter means clearing all data.
```
    javascript
    
    
c.reset()
```
```
    python
    
    
c.reset()
```
```
    c++
    
    
// Not supported yet
```

Returns

Type Description

object

Chart object.

The chart object returned by the KLineChart() function contains multiple methods, among which the begin(bar) and close(bar) methods require special attention. When iterating through K-line data to perform drawing operations, you must start with the begin(bar) function call and end with the close(bar) function call.

Arguments

Name Type Required Description

options

object / object array

Yes

The options parameter is a chart configuration object that supports the following properties:

overlay: Boolean value, sets whether the drawing content is output on the main chart. When set to true, it displays on the main chart; when set to false, it displays on a sub-chart.
pricePrecision: Number, price data precision, used to control the number of decimal places for price data in the chart. For example, setting it to 2 means keeping 2 decimal places, setting it to 0 means no decimal places (rounded to integer).
volumePrecision: Number, volume data precision, used to control the number of decimal places for volume data in the chart. For example, setting it to 2 means keeping 2 decimal places, setting it to 0 means no decimal places (rounded to integer).