Merge pull request #1510 from tradingview/disable-bold-time-scale-labels

add option to disable bold labels in time scale

.size-limit.js

@@ -4,21 +4,21 @@ module.exports = [
 	{
 		name: 'CJS',
 		path: 'dist/lightweight-charts.production.cjs',
-		limit: '47.96 KB',
+		limit: '47.98 KB',
 	},
 	{
 		name: 'ESM',
 		path: 'dist/lightweight-charts.production.mjs',
-		limit: '47.89 KB',
+		limit: '47.91 KB',
 	},
 	{
 		name: 'Standalone-ESM',
 		path: 'dist/lightweight-charts.standalone.production.mjs',
-		limit: '49.61 KB',
+		limit: '49.63 KB',
 	},
 	{
 		name: 'Standalone',
 		path: 'dist/lightweight-charts.standalone.production.js',
-		limit: '49.66 KB',
+		limit: '49.68 KB',
 	},
 ];

src/api/options/time-scale-options-defaults.ts

@@ -18,4 +18,5 @@ export const timeScaleOptionsDefaults: HorzScaleOptions = {
 	ticksVisible: false,
 	uniformDistribution: false,
 	minimumHeight: 0,
+	allowBoldLabels: true,
 };

src/gui/time-axis-widget.ts

@@ -422,7 +422,9 @@ export class TimeAxisWidget<HorzScaleItem> implements MouseEventHandlers, IDestr
 					ctx.fillText(tickMark.label, coordinate, yText);
 				}
 			}
-			ctx.font = this._baseBoldFont();
+			if (this._chart.options().timeScale.allowBoldLabels) {
+				ctx.font = this._baseBoldFont();
+			}
 			for (const tickMark of tickMarks) {
 				if (tickMark.weight >= maxWeight) {
 					const coordinate = tickMark.needAlignCoordinate ? this._alignTickMarkLabelCoordinate(ctx, tickMark.coord, tickMark.label) : tickMark.coord;

src/model/time-scale.ts

@@ -195,6 +195,13 @@ export interface HorzScaleOptions {
 	 * @defaultValue 0
 	 */
 	minimumHeight: number;
+
+	/**
+	 * Allow major time scale labels to be rendered in a bolder font weight.
+	 *
+	 * @defaultValue true
+	 */
+	allowBoldLabels: boolean;
 }
 
 export interface ITimeScale {

tests/e2e/graphics/test-cases/time-scale/disable-bold-labels.js

@@ -0,0 +1,22 @@
+function generateData() {
+	const res = [];
+	const time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0));
+	for (let i = 0; i < 500; ++i) {
+		res.push({
+			time: time.getTime() / 1000,
+			value: i,
+		});
+
+		time.setUTCDate(time.getUTCDate() + 1);
+	}
+	return res;
+}
+
+function runTestCase(container) {
+	const chart = window.chart = LightweightCharts.createChart(container);
+	chart.timeScale().applyOptions({ allowBoldLabels: false });
+
+	const mainSeries = chart.addLineSeries();
+
+	mainSeries.setData(generateData());
+}