Search code examples
javascriptreactjslightweight-charts

Fetching the data in React

I am trying to draw a chart fetching data from a Web Api. I can see some data is getting through but I still can not get the chart drawn. Pls let me know if I am doing something wrong.

import React, { Component } from 'react';
import './main.styles.scss';
import { createChart } from 'lightweight-charts';

async function getData() {
  const response = await fetch(`http://localhost:3500/stock/app/RY`);
  const data = await response.json();
  return data.webApiData;
}

class Main extends Component {
  ref = React.createRef();

  componentDidMount() {
    const chart = createChart(this.ref.current, {
      width: 1400,
      height: 550,
      timeScale: {
        timeVisible: true,
        secondsVisible: false,
      },
    });

    const candleSeries = chart.addCandlestickSeries();

    const chartData = getData().then((data) => {
      console.log(data);
      candleSeries.setData(data);
    });
  }

  render() {
    return (
      <div className="main">
        <div className="trading">
          <div className="box one">1</div>
          <div className="box two" ref={this.ref}></div>
        </div>
      </div>
    );
  }
}

export default Main;

Here is the data on the console.log enter image description here

Here is the error I am getting enter image description here

Solution

  • It's because the format of the time attribute is not in the correct style. It should be in YYYY-MM-DD style.

    For example, you can try

    const chartData = getData().then((data) => {
   console.log(data);
   candleSeries.setData(data.map((sD) => {
       return {time: `${sD.time.year}-${sD.month > 9 ? sD.month : `0${sD.time.month}`}-${sD.day > 9 ? sD.day : `0${sD.day}`}`, ...sD}
   }));
});