In this course we teach you how to create admin reports with React using a query builder. Admin reporting is a broad topic, and getting started can be overwhelming.

In five modules, we cover configuration of the query builder, setting up a server, displaying data in a grid, chart, and map, as well as some more advanced uses of the query builder. It's about three hours long and comes with code samples.

The course is taught by Jake Boone, who uses React Query Builder in real, mission-critical applications for a large engineering and construction firm.

In this course, we'll be using React Query Builder to create admin reports with complex filtering, bulk editing, data grids, charts, and maps.

Building Advanced Admin Reporting in React

---
title: How to Visualize React API Data in a Graph With AG Charts
description: Configuring a chart to display summary information about the data
privateVideoUrl: https://fullstack.wistia.com/medias/l5x0ezu7qp
code: https://gitlab.com/fullstackio/books/newline-course-apps/jake-boone-building-advanced-admin-reporting-in-react/-/tree/main/code/module_03/lesson_03.06
---

# Displaying data in a chart

Now we'll add a chart to the page to display the data as a line graph. We'll use the free [AG Charts](https://www.ag-grid.com/javascript-charts-overview/) library. First install the dependencies.

```shell
npm i ag-charts-community ag-charts-react
```

After installing the dependencies, add a state variable to hold the chart data coming from the API.

```typescript { actualFilename=./protected/src/App.tsx endLine=31 startLine=31 statedFilename=client/src/App.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-advanced-admin-reporting-in-react/module_03/lesson_03.06/protected/src/App.tsx#L31 }
  const [chartData, setChartData] = useState<any[]>([]);
```

Store the data in the variable when the API is successful.

```typescript { actualFilename=./protected/src/App.tsx endLine=52 startLine=51 statedFilename=client/src/App.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-advanced-admin-reporting-in-react/module_03/lesson_03.06/protected/src/App.tsx#L51 }
      setRawData(res.data);
      setChartData(res.chartData);
```

Now we can add our chart component at the bottom of the `return` statement.

```typescript { actualFilename=./protected/src/App.tsx endLine=1 startLine=1 statedFilename=client/src/App.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-advanced-admin-reporting-in-react/module_03/lesson_03.06/protected/src/App.tsx }
import { AgChartsReact } from "ag-charts-react";
```

```typescript { actualFilename=./protected/src/App.tsx endLine=108 startLine=82 statedFilename=client/src/App.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-advanced-admin-reporting-in-react/module_03/lesson_03.06/protected/src/App.tsx#L82 }
      <AgChartsReact
        options={{
          data: processChartData(chartData),
          series: [
            {
              type: "line",
              xKey: "order_month",
              yKey: "revenue",
            },
            {
              type: "line",
              xKey: "order_month",
              yKey: "profit",
            },
          ],
          axes: [
            {
              type: "time",
              position: "bottom",
            },
            {
              type: "number",
              position: "left",
            },
          ],
        }}
      />
```

Note that the `processChartData` function merely converts the `order_month` value from a string to a proper JavaScript `Date` object.

Configuring a chart to display summary information about the data