---
title: "Build a React component to display a dynamic chart using data fetched from an API."  
description: "Build a React component to display a dynamic chart using data fetched from an API."  
author: "Steilla Mitchel"  
published: 2023-07-26  
updated: 2023-07-27  
canonical: https://www.mindstick.com/forum/159308/build-a-react-component-to-display-a-dynamic-chart-using-data-fetched-from-an-api  
category: "javascript"  
tags: ["javascript", "api(s)", "reactjs", "mern"]  
reading_time: 2 minutes  

---

# Build a React component to display a dynamic chart using data fetched from an API.

Build a [React component](https://www.mindstick.com/forum/159296/implement-a-react-component-that-manages-a-form-s-state-and-validates-user-inputs) to display a [dynamic chart](https://answers.mindstick.com/qa/109818/how-to-create-a-dynamic-chart-in-excel) using [data](https://www.mindstick.com/articles/13050/salesforce-aiming-to-dominate-predictive-analytics-with-data-science) fetched from an API.

## Replies

### Reply by Aryan Kumar

Sure, here is an example of a [React](https://www.mindstick.com/articles/327892/react-why-it-just-makes-sense-for-web-development) [component](https://www.mindstick.com/articles/12262/learn-how-to-make-a-component-in-magento-2) to display a [dynamic](https://www.mindstick.com/blog/11080/features-of-java-dynamic-complied-and-interpreted) [chart](https://www.mindstick.com/articles/1509/show-google-analytics-data-in-chart-in-asp-dot-net-mvc) using data fetched from an API:

JavaScript

```plaintext
import React, { useState, useEffect } from 'react';
import Chart from 'react-apexcharts';

const DynamicChart = ({ apiUrl }) => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch(apiUrl)
      .then((response) => response.json())
      .then((data) => {
        setData(data);
      });
  }, []);

  return (
    <Chart
      options={{
        chart: {
          type: 'line',
        },
        series: [
          {
            name: 'Data',
            data: data,
          },
        ],
      }}
      seriesNames={['Data']}
    />
  );
};

export default DynamicChart;
```

This component uses the `useState` hook to store the data that is fetched from the API. The `useEffect` hook is used to fetch the data from the API when the component is mounted.

The component then uses the `Chart` component from the `react-apexcharts` library to display the data in a line chart. The `options` prop to the `Chart` component is used to configure the chart, and the `series` prop is used to pass the data to the chart.

To use this component, you would need to provide the `apiUrl` prop with the URL of the API that returns the data. You could then use the component to display a dynamic chart of the data that is returned from the API.

Here is an example of how you could use the `DynamicChart` component:

JavaScript

```plaintext
const apiUrl = 'https://api.example.com/data';

const App = () => {
  return (
    <DynamicChart apiUrl={apiUrl} />
  );
};

export default App;
```

This code would fetch the data from the API and display it in a line chart. The chart would be updated dynamically as the data from the API changes.


---

Original Source: https://www.mindstick.com/forum/159308/build-a-react-component-to-display-a-dynamic-chart-using-data-fetched-from-an-api

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.