5 minute interval Candlestick chart not working in Angular

[AniketBhadane]

I'm using Angular 13.2 I wish to plot 5 minute candlestick data. But it shows me only one interval 25 Jun '18 00:00:00 with all data on on this single interval.

I installed using.: npm install --save lightweight-charts --legacy-peer-deps

Lightweight Charts Version: ^3.8.0

Steps/code to reproduce:

import { createChart } from 'lightweight-charts';
const chart = createChart('tv_test', {
      width: 1200,
      height: 600,
      timeScale: {
        visible: true,
        timeVisible: true,
        secondsVisible: true,
    },
});

const candlestickSeries = chart.addCandlestickSeries();

candlestickSeries.setData([
  { time: '2018-06-25T09:15:00.000Z', open: 75.16, high: 82.84, low: 36.16, close: 45.72 },
  { time: '2018-06-25T09:20:00.000Z', open: 45.12, high: 53.90, low: 45.12, close: 48.09 },
  { time: '2018-06-25T09:25:00.000Z', open: 60.71, high: 60.71, low: 53.39, close: 59.29 },
  { time: '2018-06-25T09:30:00.000Z', open: 68.26, high: 68.26, low: 59.04, close: 60.50 },
  { time: '2018-06-25T09:35:00.000Z', open: 67.71, high: 105.85, low: 66.67, close: 91.04 },
  { time: '2018-06-25T09:40:00.000Z', open: 91.04, high: 121.40, low: 82.70, close: 111.40 },
  { time: '2018-06-25T09:45:00.000Z', open: 111.51, high: 142.83, low: 103.34, close: 131.25 },
  { time: '2018-06-25T09:50:00.000Z', open: 131.33, high: 151.17, low: 77.68, close: 96.43 },
  { time: '2018-06-25T09:55:00.000Z', open: 106.33, high: 110.20, low: 90.39, close: 98.10 },
  { time: '2018-06-25T10:00:00.000Z', open: 109.87, high: 114.69, low: 85.66, close: 111.26 },
]);

chart.timeScale().fitContent();

Screenshots:

[SlicedSilver]

Lightweight Charts doesn't support time values in that format.

The supported formats are mentioned here: https://tradingview.github.io/lightweight-charts/docs/api#time

To get your example to work, you should use the native Date constructor to convert that date string into a timestamp. Lightweight charts expects the timestamp to be in seconds, not milliseconds, so the value will need to be divided by 1000.

function convertDate(dateString) {
 return new Date(dateString).valueOf() / 1000;
}

Here is a working example of your code: https://codesandbox.io/s/timestamps-dkqr2w

[AniketBhadane]

I get the following error for setData(data) statement:

Argument of type '{ time: number; open: number; high: number; low: number; close: number; }[]' is not assignable to parameter of type '(CandlestickData | WhitespaceData)[]'.
  Type '{ time: number; open: number; high: number; low: number; close: number; }' is not assignable to type 'CandlestickData | WhitespaceData'.
    Type '{ time: number; open: number; high: number; low: number; close: number; }' is not assignable to type 'CandlestickData'.

[AniketBhadane]

Lightweight Charts doesn't support time values in that format.

The supported formats are mentioned here: https://tradingview.github.io/lightweight-charts/docs/api#time

To get your example to work, you should use the native Date constructor to convert that date string into a timestamp. Lightweight charts expects the timestamp to be in seconds, not milliseconds, so the value will need to be divided by 1000.

function convertDate(dateString) {
 return new Date(dateString).valueOf() / 1000;
}

Here is a working example of your code: https://codesandbox.io/s/timestamps-dkqr2w

I get the following error for setData(data) statement:

Argument of type '{ time: number; open: number; high: number; low: number; close: number; }[]' is not assignable to parameter of type '(CandlestickData | WhitespaceData)[]'.
  Type '{ time: number; open: number; high: number; low: number; close: number; }' is not assignable to type 'CandlestickData | WhitespaceData'.
    Type '{ time: number; open: number; high: number; low: number; close: number; }' is not assignable to type 'CandlestickData'.

[SlicedSilver]

If you are using Typescript then you will need to cast the time value to Time.

import { Time } from 'lightweight-charts';

function convertDate(dateString: string): Time {
 return (new Date(dateString).valueOf() / 1000) as Time;
}