Merge pull request #1399 from tradingview/CLL-251_increase_mark_width

Allow tick mark label length to be overridden

.size-limit.js

@@ -4,21 +4,21 @@ module.exports = [
 	{
 		name: 'CJS',
 		path: 'dist/lightweight-charts.production.cjs',
-		limit: '47.59 KB',
+		limit: '47.62 KB',
 	},
 	{
 		name: 'ESM',
 		path: 'dist/lightweight-charts.production.mjs',
-		limit: '47.54 KB',
+		limit: '47.56 KB',
 	},
 	{
 		name: 'Standalone-ESM',
 		path: 'dist/lightweight-charts.standalone.production.mjs',
-		limit: '49.26 KB',
+		limit: '49.29 KB',
 	},
 	{
 		name: 'Standalone',
 		path: 'dist/lightweight-charts.standalone.production.js',
-		limit: '49.31 KB',
+		limit: '49.33 KB',
 	},
 ];

src/model/layout-options.ts

@@ -67,7 +67,7 @@ export interface LayoutOptions {
 	/**
 	 * Font size of text on scales in pixels.
 	 *
-	 * @defaultValue `11`
+	 * @defaultValue `12`
 	 */
 	fontSize: number;
 

src/model/time-scale.ts

@@ -26,6 +26,8 @@ import {
 } from './time-data';
 import { TimeScaleVisibleRange } from './time-scale-visible-range';
 
+const defaultTickMarkMaxCharacterLength = 8;
+
 const enum Constants {
 	DefaultAnimationDuration = 400,
 	// make sure that this (1 / MinVisibleBarsCount) >= coeff in max bar spacing
@@ -160,8 +162,14 @@ export interface HorzScaleOptions {
 	ticksVisible: boolean;
 
 	/**
-	 * Chanes horizontal scale makes generation
-	 * With this flag equal to true, marks of the wame weight are drawn all or not drawn at all
+	 * Maximum tick mark label length. Used to override the default 8 character maximum length.
+	 *
+	 * @defaultValue `undefined`
+	 */
+	tickMarkMaxCharacterLength?: number;
+	/**
+	 * Changes horizontal scale marks generation.
+	 * With this flag equal to `true`, marks of the same weight are either all drawn or none are drawn at all.
 	 */
 	uniformDistribution: boolean;
 }
@@ -270,7 +278,6 @@ export class TimeScale<HorzScaleItem> implements ITimeScale {
 
 		this._invalidateTickMarks();
 		this._updateDateTimeFormatter();
-
 		this._optionsApplied.fire();
 	}
 
@@ -470,7 +477,9 @@ export class TimeScale<HorzScaleItem> implements ITimeScale {
 		const spacing = this._barSpacing;
 		const fontSize = this._model.options().layout.fontSize;
 
-		const maxLabelWidth = (fontSize + 4) * 5;
+		const pixelsPer8Characters = (fontSize + 4) * 5;
+		const pixelsPerCharacter = pixelsPer8Characters / defaultTickMarkMaxCharacterLength;
+		const maxLabelWidth = pixelsPerCharacter * (this._options.tickMarkMaxCharacterLength || defaultTickMarkMaxCharacterLength);
 		const indexPerLabel = Math.round(maxLabelWidth / spacing);
 
 		const visibleBars = ensureNotNull(this.visibleStrictRange());

tests/e2e/graphics/test-cases/initial-options/tick-marks-formatter-2.js

@@ -21,7 +21,7 @@ function getData() {
 function runTestCase(container) {
 	const chart = window.chart = LightweightCharts.createChart(container, {
 		timeScale: {
-			tickMarkFormatter: (time, tickMarkType, locale) => time, // return time as is
+			tickMarkFormatter: (time, tickMarkType, locale) => time.toString(), // return time as is
 		},
 	});