Draw one day area chart using lightweight-chart library

Question

I am trying to plot stock price data for a ticker using lightweight-charts.I can use it in expected way to draw chart for intervals like 1w, 1 month or 3 month etc. But Chart is not drawn as expected for one-day data.

Here are my part of code :

useEffect(() => {
  const chart = createChart(ref.current, {
    lineVisible: false,
    width: 400,
    height: 200,
    layout: {
      background: { color: "#26273000" },
      textColor: "rgba(255, 255, 255, 0.9)",
    },
    leftPriceScale: {
      borderVisible: false,
      autoScale: true,
    },
    rightPriceScale: {
      borderVisible: false,
      autoScale: true,
    },

    grid: {
      horzLines: {
        visible: false,
      },
      vertLines: {
        visible: false,
      },
    },
    crosshair: {
      mode: CrosshairMode.Magnet,
    },

    timeScale: {
      minBarSpacing: 0.001,
      borderVisible: false,
      fixLeftEdge: true,
      fixRightEdge: true,
    },
    priceScale: {
      fixLeftEdge: true,
      fixRightEdge: true,
      minBarSpacing: 0.001,
    },
    localization: {
      priceFormatter: (price) => {
        return parseInt(price);
      },
    },
  });
  const areaSeries = chart.addAreaSeries();
  const data = [
    { time: "2022-03-21T09:15:00", value: 502 },
    { time: "2022-03-21T09:30:00", value: 498.1 },
    { time: "2022-03-21T09:45:00", value: 495.6 },
    { time: "2022-03-21T10:00:00", value: 495.35 },
    { time: "2022-03-21T10:15:00", value: 495.6 },
    { time: "2022-03-21T10:30:00", value: 495.7 },
    { time: "2022-03-21T10:45:00", value: 495.5 },
    { time: "2022-03-21T11:00:00", value: 495.7 },
    { time: "2022-03-21T11:15:00", value: 495.5 },
    { time: "2022-03-21T11:30:00", value: 495.65 },
    { time: "2022-03-21T11:45:00", value: 494.1 },
    { time: "2022-03-21T12:00:00", value: 492.45 },
    { time: "2022-03-21T12:15:00", value: 492.7 },
    { time: "2022-03-21T12:30:00", value: 492.3 },
    { time: "2022-03-21T12:45:00", value: 490 },
    { time: "2022-03-21T13:00:00", value: 490.05 },
    { time: "2022-03-21T13:15:00", value: 489.95 },
    { time: "2022-03-21T13:30:00", value: 489.65 },
    { time: "2022-03-21T13:45:00", value: 491.05 },
    { time: "2022-03-21T14:00:00", value: 491.4 },
    { time: "2022-03-21T14:15:00", value: 492.8 },
    { time: "2022-03-21T14:30:00", value: 492.55 },
    { time: "2022-03-21T14:45:00", value: 490.8 },
    { time: "2022-03-21T15:00:00", value: 490.7 },
    { time: "2022-03-21T15:15:00", value: 491.05 },
    { time: "2022-03-21T15:30:00", value: 490.1 },
  ];
  const visibleTimeRange = {};
  visibleTimeRange.from = new Date(data[0].time).getTime() - 75000 * 6; 
//7.5 minutes offset

  visibleTimeRange.to = new Date(data[data.length - 1].time).getTime() + 75000 * 6;
 //7.5 minutes offset

  chart.timeScale().setVisibleLogicalRange(visibleTimeRange);
}, []);

return <div ref={ref}></div>;

However, the chart does not show time on its timeScale. The chart looks like a straight line drawn on the same day.

Chart for other range looks as expected:

Please help me in fixing this issue. Thanks!

Update-1: After I changed time to their microseconds format using new Date(date).getTime(),then i was able to see plot but time and date on x-axis were not correct.

Answer 1

This question has already been answered here.

Basically you need to properly format your timestamp as explained in the doc.