Custom color for items of candlestick and line series

[0x48415a484952]

Hello, a feature to be able change the color of candlesticks and lineSeries based on a condition think of it like the VolumeSeries that are already implemented that accepts a color as a variable but this time for lines and candlesticks. the image below can be a good example of this , the line is the same but in some times the color is red or green based on the condition.

[ColCh]

@timocov Hi! Any workaround for this?

I wonder why TradingView itself has this feature. It uses Lightweight Charts too?

for example, like plotting 2 line series (with different colors), as demo with plot.ly here https://community.plotly.com/t/color-change-by-range-in-line-chart/17829/2

[timocov]

Any workaround for this?

I don't think there is a workaround for that.

It uses Lightweight Charts too?

TradingView's chart is different product, but they all are have the same roots and moving together.

I wonder why TradingView itself has this feature.

We have this feature in Charting Library and Trading Terminal though (they are based on TradingView's code).

for example, like plotting 2 line series (with different colors), as demo with plot.ly here community.plotly.com/t/color-change-by-range-in-line-chart/17829/2

Sure, we understand where it might be helpful (we have this feature in the main product for long time I guess) and that's why this issue doesn't have a "need more feedback" label. We just didn't think that this feature is important to have in the first releases of lightweight-charts. One thing is important for you, another one for others and we can't implement everything at the same time.

Meantime, I think that this feature should be easy to implement (at least for candlesticks and bars it should be pretty easy, for line it could be a bit tricky though) and if someone who wants to have this feature in lightweight-charts and who doesn't want to wait until we implement it - it can provide a proposal here (with some high-level changes, especially on the API level) and after a proposal will be approved - implements the feature.

Someday we implement everything we think should be in lightweight-charts and fix all bugs, but we don't have infinite resources to make it instantly, unfortunately.

[ColCh]

TradingView's chart is different product, but they all are have the same roots and moving together.

ahh it says about everything. Thank you for your answer!

Someday we implement everything we think should be in lightweight-charts and fix all bugs, but we don't have infinite resources to make it instantly, unfortunately.

Sure guys, have your time.

[allartdo]

@ColCh There is a workaround possible. But it is not best for performance if you want to make years of data in your chart.

What I did is each time you want to change your line color you need to create a new line series that starts with the old data (to make it at the right x/y as) and then also the new data spot. If you dont take the last data with the new line series you will see a gap when changing color. I guess you understand the performance issue here :) Still, this works for me.

Here is some example code in Javascript:

/**
 * Creates a red or green line.
 * 
 * @param {String} color Color code
 * @param {String} date Timestamp or yyyy-mm-dd format
 * @param {Number} lastMovingAverage  
 */
function createLine(color, date, lastMovingAverage) {
    // Create line
    buySellLine = chart.addLineSeries();

    // Make sure there is no gap when changing to new line color. (keep in mind that date is the last date and for value aswell)
    // The new data is added later for me.
    buySellLine.setData([{time: date, value: lastMovingAverage}]);

    // Settings
    buySellLine.applyOptions({
        color: color,
        priceLineVisible: false,
        lastValueVisible: false
    });
}

[ColCh]

Wow such an elegant solution! Thank you! 👍

[allartdo]

Ty! Good luck coding :) Btw keep in mind that your markers will be set diffrently aswell. Since your setting markers on a serie. Collect them in an array and set them each time again and you should be done :D But you should test this a bit for yourself.

[hp8wvvvgnj6asjm7]

is this still planned to be added? would be a great feature.

[gajus]

Would you accept a PR if I work on this?

[timocov]

@gajus sorry for late reply.

if someone who wants to have this feature in lightweight-charts and who doesn't want to wait until we implement it - it can provide a proposal here (with some high-level changes, especially on the API level) and after a proposal will be approved - implements the feature.

[thanhlmm]

For the proposal I would suggest that we update the option that

// Line color
color: string | (LineData) => string

By doing so, we can guarantee backward compatibility and accept new customs.

[timocov]

@thanhlmm not sure about providing a function as a color though, because we would offer this, how the library should know that it needs to refresh all colors? Also, as soon as you provide a data for the series you can calculate the color based on series' values. I think that providing just color for line series is good enough, what's about candlesticks? What's about border color, body color, etc?

[thanhlmm]

If so we could do something like the histogram is doing. It has a default color, and in each data point, the developer can provide a custom color for it.
For the line series context, custom color gonna have this problem:
Eg: We have 3 points: A -- B -- C
If A and C are red, and B is green. What is the color for the line should be? A-red-B-red-C or A-green-B-green-C or A-red-B-green-C
I'm not sure

[thanhlmm]

I'm also working on a case that I'd like to change color for the series if it is below a price. If set color based on data point, it will look broken

For more context, what I want achieve is

[allartdo]

@thanhlmm I see what you want, would be really cool if that would be possible. I think it's like putting some sort of a filter over your screen. Everything below 2158.36 is red and above is green. Something like this: https://www2.lunapic.com/editor/?action=tint

[thanhlmm]

I have thought about that but it will affect others panel (Axis, histogram,...etc) so this is not the way I can work around.

[timocov]

I'm also working on a case that I'd like to change color for the series if it is below a price. If set color based on data point, it will look broken

@thanhlmm @allartdo see #151

[timocov]

It seems that it is quite easy to implement the feature for candlestick and bar series, but I have a question regarding a line series.

Let's say you have 3 points [{ time: 1, value: 1, color: 'red' }, { time: 2, value: 2, color: 'green' }, { time: 3, value: 1, color: 'blue' }], and each point has its own color. How it should be displayed in your opinion? The possible options are:

• a new color is started from the previous point, i.e. it "highlights" previous period of time
  

• a new color is started from the middle between current and previous points
  

• a new color is started from the current point, i.e. it "highlights" the next period of time
  

But please keep in mind that there is a line type WithSteps, which displays a steps on the current point, i.e. a step is started from the current point to the right (to "highlight" the next period of time):

[allartdo]

I think image 3 makes the most sense. Since image 1 seems to make point 1 useless. Like sure if you hover over it, it turns red, but I dont see how this helps anyone.

Image 2 seems interresting but I belive things would go weird if you have a chart where the value in point 1 is 1 and in point 2 in 100. It would mean that from a value of 50, the color would change.

I personally use mutliple colors in a single line to determine if the line goes up or down. Splitting the line color in half like in image 2 would give incorrect results for me. At least as long as I understand why you have the colors like that.

Dont know anything about the WithSteps part, so can't help you with that :(.

PS: If this is also supposed to help @thanhlmm I think neither of these options will work. I belive for that you need to be able to set a specific value. And say everything above it should be X color, and everything below should be Y color.

[thanhlmm]

Yeah, I have raised the same case before. To be honest, IDK, but I think we can follow the behavior of TradingView full chart

[timocov]

Re #195 (comment) - after internal discussion we decided to do the following:

• it seems that the first example makes almost no sense so we aren't going to implement it
• as for 2 and 3 - we will implement them both and you will be able to control the way it is displaying via an option. But probably for now we'll leave the solution as-is (3rd one) and then will create another issue to implement other option (if anybody will need this)
• as for step line - the same as above