0

I'm encountering an error in my React Native application when I attempt to fetch daily stock price data from the AlphaVantage API and display it using react-native-chart-kit.

The specific error message is ReadableNativeArray cannot be cast to com.facebook.react.bridge.ReadableMap, which prevents the chart from being displayed and leaves it in a "Loading..." state.

Here is the relevant part of my code:


// Fetching stock data and setting state
const fetchStockData = async () => {
  const response = await fetch(`https://www.alphavantage.co/query?function=TIME_SERIES_DAILY_ADJUSTED&symbol=${symbol}&outputsize=compact&apikey=${key}`);
  const json = await response.json();
  const stockData = json['Time Series (Daily)'];
  const dates = Object.keys(stockData);
  const prices = dates.map(date => parseFloat(stockData[date]['4. close'])).filter(price => !isNaN(price));
  const datasets = [
    {
      data: prices
    }
  ];
  setData({ labels: dates, datasets });
}

// Rendering chart
return (
  <View>
    {data.datasets && data.datasets.length > 0 ?
      <LineChart
        data={data}
        width={300} 
        height={220}
        yAxisLabel="$"
        chartConfig={{
          backgroundColor: "#e26a00",
          backgroundGradientFrom: "#fb8c00",
          backgroundGradientTo: "#ffa726",
          decimalPlaces: 2,
          color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
          labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
          style: {
            borderRadius: 16
          },
          propsForDots: {
            r: "6",
            strokeWidth: "2",
            stroke: "#ffa726"
          }
        }}
        bezier
        style={{
          marginVertical: 8,
          borderRadius: 16
        }}
      />
      :
      <Text>Loading...</Text>
    }
  </View>
);

The arrays prices and dates appear to contain the expected, valid values based on my logging, but the LineChart component fails to interpret the data object properly. Assistance on this issue is required.

I'm not sure why this is happening and how I should go about debugging it. Could there be an issue with the way I'm structuring the data for the LineChart component? Or could there be a compatibility issue between these libraries?

TTY
  • 1
  • 1

1 Answers1

0

You're setting datasets as an array containing a single object. Instead, you should directly pass the array of prices as the data property of the datasets object.

// Fetching stock data and setting state
const fetchStockData = async () => {
  const response = await fetch(`https://www.alphavantage.co/query?function=TIME_SERIES_DAILY_ADJUSTED&symbol=${symbol}&outputsize=compact&apikey=${key}`);
  const json = await response.json();
  const stockData = json['Time Series (Daily)'];
  const dates = Object.keys(stockData);
  const prices = dates.map(date => parseFloat(stockData[date]['4. close'])).filter(price => !isNaN(price));
  const datasets = [
    {
      data: prices
    }
  ];
  setData({ labels: dates, datasets });
}

// Rendering chart
return (
  <View>
    {data.datasets && data.datasets.length > 0 ?
      <LineChart
        data={{ datasets: data.datasets }} // Restructured the data object
        width={300} 
        height={220}
        yAxisLabel="$"
        chartConfig={{
          backgroundColor: "#e26a00",
          backgroundGradientFrom: "#fb8c00",
          backgroundGradientTo: "#ffa726",
          decimalPlaces: 2,
          color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
          labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
          style: {
            borderRadius: 16
          },
          propsForDots: {
            r: "6",
            strokeWidth: "2",
            stroke: "#ffa726"
          }
        }}
        bezier
        style={{
          marginVertical: 8,
          borderRadius: 16
        }}
      />
      :
      <Text>Loading...</Text>
    }
  </View>
);
Mr Ginting
  • 324
  • 1
  • 6