Reply To: React stockchart auto range changing on yaxis not working.not working

[Indranil]

@vedant,

Based on the data provided by you we observed that the x-values(dates) are not sorted. Hence, sorting the data in ascending order with respect to dates seems to be working fine. Please check the below code snippet to sort data in React –

componentDidMount() {
    //Reference: https://reactjs.org/docs/faq-ajax.html#example-using-ajax-results-to-set-local-state
    fetch("https://financialmodelingprep.com/api/v3/historical-price-full/AAPL?apikey=demo")
      .then(res => res.json())
      .then(
        (data) => {
          var dps = [];
          var dataPoints = data.historical;
          for (var i = 0; i < dataPoints.length; i++) {
            dps.push({
              x: new Date(dataPoints[i].date),
              y: Number(dataPoints[i].close)
            });
          }

          //sorting dataPoints in ascending order with respect to x-values
          dps.sort(this.compareDataPointXAscend);

          this.setState({
            isLoaded: true,
            dataPoints: dps
          });
        }
     )
 }

 compareDataPointXAscend(dataPoint1, dataPoint2) {
     return dataPoint1.x.getTime() - dataPoint2.x.getTime();
 }

Also, kindly take a look at this working sample project to sort the data with respect to dates in React. Please refer to the instructions.txt file for steps to deploy the sample.

___________
Indranil Deo
Team CanvasJS