tradingview / lightweight-charts

Performant financial charts built with HTML5 canvas
https://www.tradingview.com/lightweight-charts/
Apache License 2.0
9.09k stars 1.57k forks source link

Marker on wrong candle #1182

Closed Vimiso closed 1 year ago

Vimiso commented 1 year ago
Screenshot 2022-10-24 at 22 03 28

In the screenshot you can see I have a square marker (position logged in the console) 1665655200 '2022-10-13 10:00:00'

The chart candles are 4 hours. However, after pushing and setting the marker, it's in the wrong position.

The marker has timestamp 2022-10-13 10:00:00 (converted to unix) so surely it should fall into the prior candlestick (08:00-12:00)? Instead it's in the candlestick that starts from 12:00!

SlicedSilver commented 1 year ago

This may be related to your issue: https://tradingview.github.io/lightweight-charts/docs/time-zones

If that doesn't help then could you please create a JSFiddle (or similar) code sample of the problem so we can investigate it further. All you would need to include in the sample is about 5 data points (2 each side of the one you are trying to set), and set the marker.

Here is a starting point: https://jsfiddle.net/msilverwood/r50whgb1/4/

Vimiso commented 1 year ago

Hey, I actually do have a timezone implementation - but have left it out for the sake of this example.

I am simply using unix timestamps for everything in my example and am demonstrating that a marker that belongs within the window of a 4hr candle is not logically placed on it, but rather on a 4hr having irrelevant time window based on the given marker timestamp.

SlicedSilver commented 1 year ago

Here is a quick JSfiddle: https://jsfiddle.net/msilverwood/r50whgb1/

It demonstrates how the markers are placed when the time has a few different values.

Essentially, it works as follows: If we have two candles A & B & C which have timestamps of 1000 & 2000 & 3000.

With a candle, the time is for the close (or end of the candle) therefore the "time range" for candle B would be 10012000.

Vimiso commented 1 year ago

That's really helpful, thank-you! I noticed this when playing around, that I could subtract some amount from the unix timestamp to correct things. I just assumed the marker would go into the nearest candle. However, as stated in your third example, a marker closer to 1000 will be placed on candle B because 1000 is simply larger than the prior value? Guess I'll create a formula to consistently correct things over varying intervals.

Vimiso commented 1 year ago

Sorted it by rounding down to open time based on interval:

let intervals = {
    '30_minutes': (3600/2),
    '1_hour': 3600,
    '4_hours': (3600*4),
    '1_day': (3600*24)
}
let seconds = intervals['4_hours']
let markerUnixTimeRounded - (markerUnixTime % seconds)

// Ready to plot markers in correct position, phew!
sainiankit commented 1 year ago

Screenshot 2022-11-29 at 1 25 46 PM

With a candle, the time is for the close (or end of the candle)

This does not seem to be true, looking at the last candle (ongoing) at tradingview.com, also in my implementation of lightweight-charts, It seems like candles display the opening time and not the closing time. (Current candle always displays a timestamp from the past, rather than the future)

For Example in the screenshot attached (1H Chart). If candles were showing the closing time, the time displayed at last candle on time axis should be 1:30 not 12:30 (See current time in the System toolbar at the top)

@SlicedSilver @Vimiso Am I missing something here?

SlicedSilver commented 1 year ago

Lightweight charts will show the date and time that you assign to time value of the data point, it's different to how it works on TV because those charts use a specific resolution (say 1H). A lightweight chart doesn't 'fix' your timestamps or require that the data points have regular time gaps.

Here is an example with bar with different time intervals between them. Notice that the time scale isn't 'linear'. https://jsfiddle.net/msilverwood/bhLoxp9g/

Vimiso commented 1 year ago

Screenshot 2022-11-29 at 1 25 46 PM

With a candle, the time is for the close (or end of the candle)

This does not seem to be true, looking at the last candle (ongoing) at tradingview.com, also in my implementation of lightweight-charts, It seems like candles display the opening time and not the closing time. (Current candle always displays a timestamp from the past, rather than the future)

For Example in the screenshot attached (1H Chart). If candles were showing the closing time, the time displayed at last candle on time axis should be 1:30 not 12:30 (See current time in the System toolbar at the top)

@SlicedSilver @Vimiso Am I missing something here?

My formula above fixes the issues because it takes a markerUnixTime which is already some opening time of some interval and rounds it to some interval you are displaying in your chart, plotting it at the correct open position.

Also, if you want to compare with TD, make sure your timezone is the same between your local and TD. In my case I set my TD timezone to UTC for testing, to match my local implementation.