illetid
commented
2 months ago Hi, it is possible to address this issue with some additional code from the user side.
So at first you need to extend DefaultHorzScaleBehavior and implement shouldResetTickmarkLabels
import {
TickMark,
defaultHorzScaleBehavior,
} from 'lightweight-charts';
const DefaultHorzScaleBehavior = defaultHorzScaleBehavior();
export class LightweightChartHorzScaleBehavior extends DefaultHorzScaleBehavior {
private _lastHash: string = '';
public override shouldResetTickmarkLabels(items: TickMark[]): boolean {
const itemsHash = this.calculateItemsHash(items);
const res = itemsHash !== this._lastHash;
this._lastHash = itemsHash;
return res;
}
private calculateItemsHash(items: TickMark[]): string {
return items.reduce((hash: string, item: TickMark) => hash + item.index, ''); // Simplified hash logic
}
}then you need to use createChartEx and pass there your changed LightweightChartHorzScaleBehavior
// use LightweightCharts.something or just import it like import {createChartEx} from 'lightweight-charts'
const chart = LightweightCharts.createChartEx(container, new LightweightMiniChartHorzScaleBehavior(), {});
function convertTime(t) {
if (LightweightCharts.isUTCTimestamp(t)) {
return t * 1000;
}
if (LightweightCharts.isBusinessDay(t)) {
return new Date(t.year, t.month, t.day).valueOf();
}
const [year, month, day] = t.split('-').map(tm => parseInt(tm, 10));
return new Date(year, month, day).valueOf();
}
const converted = new Map();
function convertTimeWithMemory(t) {
const existingAnswer = converted.get(t);
if (existingAnswer) {
return existingAnswer;
}
const answer = new Date(convertTime(t));
converted.set(t, answer);
return answer;
}
let lastDate;
let lastTickMarkType;
chart.timeScale().applyOptions({
tickMarkFormatter: (time, tickMarkType) => {
let answer = null;
const date = convertTimeWithMemory(time);
if (lastDate && lastTickMarkType !== undefined && date.valueOf() > lastDate.valueOf() && tickMarkType > lastTickMarkType) {
if (tickMarkType === LightweightCharts.TickMarkType.Month) {
// check year is the same
if (date.getFullYear() !== lastDate.getFullYear()) {
answer = '';
}
} else if (tickMarkType === LightweightCharts.TickMarkType.DayOfMonth) {
// check month is the same
if (date.getMonth() !== lastDate.getMonth() || date.getFullYear() !== lastDate.getFullYear()) {
answer = '';
}
}
}
if (answer !== '') {
lastDate = date;
lastTickMarkType = tickMarkType;
}
return answer;
},
});In this example we are just hiding the tickmark but you can change it to show the data you need
benjamindamm
Problem Statement The current implementation of the fillWeightsForPoints function in the lightweight-charts library has a flaw that affects the correct calculation of tick mark weights, particularly for the second rendered label on the time axis. When prevTime is null, the fallback mechanism can result in totalTimeDiff being zero for the first point. This leads to an incorrect calculation of averageTimeDiff, which in turn causes inaccurate weight assignments for subsequent labels.
Issue Details In particular, this issue manifests when the time difference for the first label is estimated. The current logic can cause the label to be positioned incorrectly, potentially appearing in an arbitrary or unintended location on the time axis. This behavior is especially problematic when precise labeling is required, as it can result in misleading or confusing chart outputs.
Steps to Reproduce Render a chart with a minimal number of time points, particularly focusing on the first few labels. Observe how the second label is rendered in relation to the first label. Note that the weight assigned to the second label may not reflect the intended time interval, leading to incorrect positioning.
Proposed Temporary Solution To address this, I implemented a conditional check that ensures the time difference is only calculated when prevTime is not null. This change forces the first label to always be displayed with a weight that corresponds to a year. While this is not a comprehensive solution and may not be appropriate for every case, it highlights the underlying issue and prevents the most egregious positioning errors.
I created a pull request for this: https://github.com/tradingview/lightweight-charts/pull/1688
Here you can find a Stackblitz which reproduces the issue: https://stackblitz.com/edit/stackblitz-starters-zzpxjk?file=src%2Fapp%2Fapp.component.ts