forum

Home / DeveloperSection / Forums / Build a React component to display a dynamic chart using data fetched from an API.

Ask Question
Steilla Mitchel

Steilla Mitchel

Follow
I completed my post-graduation in 2013 in the engineering field. Engineering is the application of science and math to solve problems. Engineers figure out how things work and find practical uses for scientific discoveries. Scientists and inventors often get the credit for innovations that advance the human condition, but it is engineers who are instrumental in making those innovations available to the world. I love pet animals such as dogs, cats, etc.

Can you answer this question?

Answer

1 Answers

Aryan Kumar

Aryan Kumar

27-Jul-2023

Sure, here is an example of a React component to display a dynamic chart using data fetched from an API:

JavaScript

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

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.

MindStick Training

Liked By