WRT-1291: Describe how to remove gaps

website/docs/time-scale.md

@@ -4,6 +4,8 @@ sidebar_position: 5
 
 # Time scale
 
+## Overview
+
 Time scale (or time axis) is a horizontal scale at the bottom of the chart that displays the time of bars.
 
 ![Time scale](/img/time-scale.png "Time scale")
@@ -35,3 +37,39 @@ Half (e.g. `1.5`, `3.5`, `10.5`) means exactly a middle of the bar.
 Red vertical lines here are borders between bars.
 
 Thus, the visible logical range on the chart above is approximately from `-4.73` to `5.05`.
+
+## Chart margin
+
+Margin is the space between the chart's borders and the series. It depends on the following time scale options:
+
+- [`barSpacing`](/api/interfaces/TimeScaleOptions.md#barspacing). The default value is `6`.
+- [`rightOffset`](/api/interfaces/TimeScaleOptions.md#rightoffset). The default value is `0`.
+
+You can specify these options as described in [Overview](#overview).
+
+Note that if a series contains only a few data points, the chart may have a large margin on the left side.
+
+![A series with a few points](/img/extra-margin.png)
+
+In this case, you can call the [`fitContent`](/api/interfaces/ITimeScaleApi.md#fitcontent) method that adjust the view and fits all data within the chart.
+
+```javascript
+chart.timeScale().fitContent();
+```
+
+If calling `fitContent` has no effect, it might be due to how the library displays data.
+
+The library allocates specific width for each data point to maintain consistency between different chart types.
+For example, for line series, the plot point is placed at the center of this allocated space, while candlestick series use most of the width for the candle body.
+The allocated space for each data point is proportional to the chart width.
+As a result, series with fewer data points may have a small margin on both sides.
+
+![Margin](/img/margin.png)
+
+You can specify the [logical range](#logical-range) with the [`setVisibleLogicalRange`](/api/interfaces/ITimeScaleApi.md#setvisiblelogicalrange) method to display the series exactly to the edges.
+For example, the code sample below adjusts the range by half a bar-width on both sides.
+
+```javascript
+const vr = chart.timeScale().getVisibleLogicalRange();
+chart.timeScale().setVisibleLogicalRange({ from: vr.from + 0.5, to: vr.to - 0.5 });
+```