How to use hourly and minute timeframes in Lightweight charts TradingView?

Question

In the examples Lightweight charts TradingView show plotting on a daily timeframe, but I can't figure out how to correctly pass data to setData in order to use hourly and minute timeframes.

Please tell me.

import { createChart } from 'lightweight-charts';

const chart = createChart(container);

const areaSeries = chart.addAreaSeries();
areaSeries.setData([
    { time: '2018-12-22', value: 32.51 },
    { time: '2018-12-23', value: 31.11 },
    { time: '2018-12-24', value: 27.02 },
    { time: '2018-12-25', value: 27.32 },
    { time: '2018-12-26', value: 25.17 },
    { time: '2018-12-27', value: 28.89 },
    { time: '2018-12-28', value: 25.46 },
    { time: '2018-12-29', value: 23.92 },
    { time: '2018-12-30', value: 22.68 },
    { time: '2018-12-31', value: 22.67 },
]);

const candlestickSeries = chart.addCandlestickSeries();
candlestickSeries.setData([
    { time: '2018-12-22', open: 75.16, high: 82.84, low: 36.16, close: 45.72 },
    { time: '2018-12-23', open: 45.12, high: 53.90, low: 45.12, close: 48.09 },
    { time: '2018-12-24', open: 60.71, high: 60.71, low: 53.39, close: 59.29 },
    { time: '2018-12-25', open: 68.26, high: 68.26, low: 59.04, close: 60.50 },
    { time: '2018-12-26', open: 67.71, high: 105.85, low: 66.67, close: 91.04 },
    { time: '2018-12-27', open: 91.04, high: 121.40, low: 82.70, close: 111.40 },
    { time: '2018-12-28', open: 111.51, high: 142.83, low: 103.34, close: 131.25 },
    { time: '2018-12-29', open: 131.33, high: 151.17, low: 77.68, close: 96.43 },
    { time: '2018-12-30', open: 106.33, high: 110.20, low: 90.39, close: 98.10 },
    { time: '2018-12-31', open: 109.87, high: 114.69, low: 85.66, close: 111.26 },
]);

Referendum

Answer 1

From the documentation, we see this about the Time type:

Values can be a UTCTimestamp, a BusinessDay, or a business day string in ISO format.

As their names suggest, BusinessDay and business day string don't seem to work for timeframes lower than a day, this is why date strings like YYYY-MM-DD work but datetime strings like YYYY-MM-DD HH:MM don't. You will need to use UTCTimestamp.

Note: UTCTimestamp is a timestamp in seconds, not milliseconds.

Catina

Answer 2

lineSeries.setData([
    { time: Date.parse('2019-04-11 09:43')/1000, open: 180.34, high: 180.99, low: 178.57, close: 179.85 },
    { time: Date.parse('2019-04-11 09:44')/1000, open: 180.82, high: 181.40, low: 177.56, close: 178.75 },
    { time: Date.parse('2019-04-11 09:45')/1000, open: 175.77, high: 179.49, low: 175.44, close: 178.53 },
    { time: Date.parse('2019-04-11 09:46')/1000, open: 178.58, high: 182.37, low: 176.31, close: 176.97 },
    { time: Date.parse('2019-04-11 09:47')/1000, open: 177.52, high: 180.50, low: 176.83, close: 179.07 }
]);

this works for me.

Polariscope

it works for drawing but not for hover. – Giacometti

Answer 3

Excuse me if I'm not well understood, I'm using google translate...

I was all afternoon with the same problem, I managed to find the solution here

https://github.com/tradingview/lightweight-charts/issues/477

Grotius

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Steinway