Markers get cropped off at extremes

[maxkostin]

Lightweight Charts Version: 3.8.0

Steps/code to reproduce:

• Chart is set to disable scroll/zoom
• Add marker(s) to the first or the last candle stick
• Set chart.timeScale().fitContent();

Actual behavior:
Markers are cropped off. I can add rightOffset to alleviate the issue, but there's no option to set leftOffset.

Expected behavior:
Markers should be fully visible

Screenshots:

CodeSandbox/JSFiddle/etc link:
JSFiddle link

[SlicedSilver]

Thanks @maxkostin, am I right in concluding that you would like a leftOffset option to be added?

There is a way to get your desired behaviour at the moment if you make use of setVisibleLogicalRange :

chart.timeScale().applyOptions({
  rightOffset: 4,
});
chart.timeScale().fitContent();
requestAnimationFrame(() => {
  // needs to be called after the chart has been redrawn, so requestAnimationFrame is used.
  const currentVisibleLogicalRange = chart.timeScale().getVisibleLogicalRange();
  chart.timeScale().setVisibleLogicalRange({
    ...currentVisibleLogicalRange,
    from: currentVisibleLogicalRange.from - 4 // adding a left offset of 4
  });
});

Basically, we are calling fitContent → waiting for the change to take effect → then getting the current visible logical range → and then adjusting that so a 'left offset' is added.

[maxkostin]

Thanks @SlicedSilver, your solution might help, but it also has unintended consequences: rightOffset/leftOffset have their own meaning (the data is not fully available for a set time range for example).
The markers should be fully visible when timeScale().fitContent() is called, without extra steps.
There are several possible solutions:

• an option to add left and right padding to timeScale
• make text on markers not centre-aligned when at extreme positions and when there is an overflow.

[SlicedSilver]

Thanks for the extra clarification.

Possible solutions / future enhancements:

• Add a leftOffset option to TimeScaleOptions interface.
• fitContent() should fit markers, not just data points.
• Move the marker text when near a chart edge such that it remains fully visible.

We will need to discuss the possible ideas within the team to determine which approach would be the best.

[0x33dm]

// needs to be called after the chart has been redrawn, so requestAnimationFrame is used.

is requestAnimationFrame the recommended way to wait after updating candles / setting the offset?

i'm finding that if i set rightOffset before setting candle data the rightOffset is ignored so i had to add subscribedatachanged and then apply rightOffset only after the data is changed.

what is the recommended approach @SlicedSilver ?

[0x33dm]

Actually on my case i found that requestAnimationFrame is perhaps too quick and the offset is not added.

Currently i'm using setTimeout with 100 ms and it's working, but would be nice to somehow not depend on a random timeout to get the rightOffset applied.

I guess i'm doing something wrong here @SlicedSilver ?

[SlicedSilver]

Needing to use anything longer than a RequestAnimationFrame delay is not expected.

It would be helpful if you could provide a code sample so we could know the combination of settings which are being used to produce this issue.

• Are you using the autosize option on the chart, and are there any changes to chart size?
• Do you have lockVisibleTimeRangeOnResize enabled?
• How are you creating the chart? Are you only creating the chart when it has data which you can set immediately, or are you creating the chart and then at a later stage adding the data / series?

[0x33dm]

• Are you using the autosize option on the chart, and are there any changes to chart size?

• autoSize is true wheen i create the chart

• Do you have lockVisibleTimeRangeOnResize enabled?

i did a new refactor and perhaps this was the culprit? tbh i changed so many things that's now hard to put my finger on exactly what solved, but after cleaning up a lot of the logic reqAnimFrame is doing the job perfectly!

thank you