CODEWITHSUNDEEP
javascriptchartstradingview-apilightweight-charts
Allart
Allart

Reputation: 928

How to give a single line serie multiple colors with Tradingview Lightweight charts in Javascript?

This image below is what I have at this moment. enter image description here This image below is what I want. (1st image from my code, second from tradingview). enter image description here

To be clear: I want a single line to have multiple colors. For my situation I need only two colors. I need each new line I create changable in color. Its a nice to have if the price tag on the right also changes to the color of the line that hits the right part of the chart.

This is my code:

var chart = LightweightCharts.createChart(document.getElementById("Chart"), {width: 1500, height: 700});

/**
 * Creates startline and adds extra options to the lineSeries.
 */
function initChartSettings() {
    // Init lines
    priceArea = chart.addAreaSeries();
    buySellLine = chart.addLineSeries();   //LINE THAT NEEDS TWO COLORS

    // Set start position of lines
    priceArea.setData([{time: '2019-04-11', value: startPrice}]);
    buySellLine.setData([{time: '2019-04-11', value: startPrice}]);

    // Visualization edits
    priceArea.applyOptions({
        topColor: 'rgba(70, 130, 180, 0.5)',
        bottomColor: 'rgba(70, 130, 180, 0.1)',
        lineColor: '#4682B4'
    });

    // Buy sell line
    buySellLine.applyOptions({
        color: '#42f54b',               //CHANGES COLOR OF THE COMPLETE LINE, FROM BEGIN TO END.
        priceLineVisible: true,
        lastValueVisible: true
    });

    updateChartStatic();
}


/**
 * Updates the chart its lines.
 */
function updateChartStatic() {
    setTimeout(() => {
        priceArea.update({
            time: yearMonthDay,   //How this works should not matter for question
            value: newPrice,      //Same as above
        });

        // Updates the price line of the chart.
        buySellLine.update({
            time: yearMonthDay,
            value: currentMovingAverage       //Even though it would be nice to do the below commented thing...
            // color: 'red or green (example)'
        });

        buySellLine.applyOptions({
            color: changeLineColor(currentMovingAverage, lastMovingAverage)  // CHANGES COMPLETE LINE :(
        });
    }, 1);
}

the changeLineColor() function is doing an if statement, which has nothing to do with setting a color to a line.

Upvotes: 2

Views: 4541

Answers (1)

timocov
timocov

Reputation: 1166

EDIT: As this feature was landed in v3.8 you can simply add color properties to any of your data items by using the following properties in the data:

Note that you don't need to provide all the colors and you can provide only necessary ones (e.g. only body color for some candlestick items).

Original answer:

It's impossible right now, but there is issue for this feature https://github.com/tradingview/lightweight-charts/issues/195. You can subscribe on it to being notified when it'll be fixed (or even make a proposal and/or provide a PR with changed).

Upvotes: 5

Related Questions