Skip to content

Add support for millisecond precision and UTC ISO date format in time scale #1884

Open
@GuilhermeBCC

Description

@GuilhermeBCC

Is your feature request related to a problem? Please describe.
Currently, the chart library does not support timestamps with millisecond precision when provided in UTC ISO format such as "2025-05-06T20:50:35.018Z". This becomes a limitation when visualizing tick-by-tick financial data or real-time streaming data, where such granularity is essential for analysis and accuracy.

Attempts to convert these timestamps using new Date().getTime() or similar approaches result in inconsistent behavior or incorrect chart rendering.

Describe the solution you’d like
I would like to request native support for datetime strings in UTC ISO 8601 format that include milliseconds (e.g., "2025-05-06T20:50:35.018Z"), or at least improved handling for numerical timestamps with millisecond precision (Date.getTime() output). Ideally, the library should allow direct consumption of such values and reflect them accurately on the time scale.>

Additional context
This feature would greatly enhance the chart's applicability in high-frequency trading systems and real-time dashboards, where millisecond-level updates are common.
A robust implementation could also include customizable formatting for the time scale when milliseconds are visible, without compromising performance or clarity.

Let me know if a PR would be welcome in this area, and I’d be glad to contribute.

Activity

SlicedSilver

SlicedSilver commented on May 10, 2025

@SlicedSilver
Contributor

The library already supports this. You would need to use timestamps (number) for the time field in the data points, and then use a custom formatter to display the additional milliseconds.

Here is an example:

import {
	AreaSeries,
	ChartOptions,
	createChart,
	DeepPartial,
	Time,
	UTCTimestamp,
} from 'lightweight-charts';

function formatTime(time: Time): string | null {
	if (typeof time === 'number') {
		const date = new Date(time * 1000);
		const pad = (num: number, size: number = 2) =>
			num.toString().padStart(size, '0');
		return (
			[
				pad(date.getHours()),
				pad(date.getMinutes()),
				pad(date.getSeconds()),
			].join(':') +
			'.' +
			pad(date.getMilliseconds(), 3)
		);
	}
	return null;
}

const chartOptions = {
	autoSize: true,
	localization: {
		timeFormatter: formatTime,
	},
	timeScale: {
		timeVisible: true,
		tickMarkFormatter: formatTime,
	},
} satisfies DeepPartial<ChartOptions>;

const chart = createChart('container', chartOptions);

const areaSeries = chart.addSeries(AreaSeries, {});

areaSeries.setData([
	{ time: 1746919519100.123 as UTCTimestamp, value: 32.51 },
	{ time: 1746919519100.234 as UTCTimestamp, value: 31.11 },
	{ time: 1746919519100.456 as UTCTimestamp, value: 27.02 },
	{ time: 1746919519100.567 as UTCTimestamp, value: 27.32 },
	{ time: 1746919519100.678 as UTCTimestamp, value: 25.17 },
]);

chart.timeScale().fitContent();

Code preview: https://glitch.com/edit/#!/spectacular-unexpected-tsunami

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @SlicedSilver@GuilhermeBCC

        Issue actions

          Add support for millisecond precision and UTC ISO date format in time scale · Issue #1884 · tradingview/lightweight-charts