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?

1 Answer 1

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>
);
Sign up to request clarification or add additional context in comments.

1 Comment

This doesn't work for me, it still shows the same error.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.