How to change range for Chart using lightweights?

[Babyfacer7xi]

1. When I set some data, and the width is set to 1280px, the leftmost line cannot be left, I will try to using setVisibleLogicalRange, but it will cause other issues, the timeScale display is cut off. Could you help to this issues?
2. Each Scale Tick is in the middle by default, Is it possible to flexibly edit the position of the scale? thanks in advance.

[SlicedSilver]

You could try use the fitContent method on the timeScale. chart.timeScale().fitContent() This will make the content fit the full width of the chart.

The timeScale tick mark labels will always be centred by default. There isn't a way to prevent the label from being cut-off to the side if the timescale tick mark is at the edge of the chart.

I'm going to mark this as a feature request and we will investigate whether would we could add this at a later stage as part of an update.

[Babyfacer7xi]

@SlicedSilver i will tried the fitContent method also blanks on both sides, when some data. Could I ask how long this will add? and want to make sure is that the chart line is initialized on the far left? it starts from the left side, and there will be no blank space? and when lock scroll and scales, then timeScale can be left/center/right position. thanks in advance.

[SlicedSilver]

The library will automatically include half a bar width of space to the left of the first point and the right of the last point. This is to ensure that the candlestick (and other series) are fully visible on the chart. However, when using a line series this appears like there is a gap to left and right of the chart. This is the expected behaviour.

If you would like to ensure that the line series points are perfectly at the end of the chart then you could manually adjust the visible range as follows:

chart.timeScale().fitContent();
requestAnimationFrame(() => {
  const visibleLogicalRange = chart.timeScale().getVisibleLogicalRange();
  chart.timeScale().setVisibleLogicalRange({
    from: 0.5,
    to: visibleLogicalRange.to - 0.5,
  });
});

Example: https://codesandbox.io/p/sandbox/lightweight-charts-js-starter-forked-g81et7