Add tip for yield curve spacing

website/docs/chart-types.mdx

@@ -53,6 +53,12 @@ const chart = createYieldCurveChart(document.getElementById('container'), option
 
 Use this chart type when you need to visualize yield curves or similar financial data where the horizontal scale represents time durations rather than specific dates.
 
+:::tip
+
+If you want to spread out the beginning of the plot further and don't need a linear time scale, you can enforce a minimum spacing around each point by increasing the [`minBarSpacing`](api/interfaces/TimeScaleOptions.md#minbarspacing) option in the TimeScaleOptions. To prevent the rest of the chart from spreading too wide, adjust the `baseResolution` to a larger number, such as `12` (months).
+
+:::
+
 export const yieldCurveExample = `const chartOptions = {
     layout: { textColor: CHART_TEXT_COLOR, background: { type: 'solid', color: CHART_BACKGROUND_COLOR } },
     yieldCurve: { baseResolution: 1, minimumTimeRange: 10, startTimeRange: 3 },

website/tutorials/demos/yield-curve-with-update-markers.js

@@ -36,12 +36,13 @@ const curve2 = [
 // hide-end
 
 const chartOptions = {
+	autoSize: true,
 	layout: {
 		textColor: CHART_TEXT_COLOR,
 		background: { type: 'solid', color: CHART_BACKGROUND_COLOR },
 	},
 	yieldCurve: {
-		baseResolution: 1,
+		baseResolution: 12,
 		minimumTimeRange: 10,
 		startTimeRange: 3,
 	},
@@ -55,6 +56,9 @@ const chartOptions = {
 			visible: false,
 		},
 	},
+	timeScale: {
+		minBarSpacing: 3,
+	},
 };
 
 const container = document.getElementById('container');