# Charts
{% hint style="success" %}
This is the official documentation of Forest Admin Cloud.
{% endhint %}
Forest Admin is designed to provide you with the most flexible admin panel framework, allowing you to create charts with code to customize the visuals or the way data is retrieved.
{% hint style="info" %}
The following sections assume that you have correctly followed all the steps in the [Code Customization Getting Started](https://docs.forestadmin.com/cloud/code-customization/getting-started) guide.
{% endhint %}
### TL;DR
{% code title="src/index.ts" %}
```typescript
import type { Agent } from '@forestadmin/forest-cloud';
import { Schema } from '../typings';
export default function customizeAgent(agent: Agent) {
agent.addChart('monthlyRecurringRevenue', async (context, resultBuilder) => {
// Your business logic to retrieve data here.
return resultBuilder.value(10000000);
});
}
```
{% endcode %}
### Implementing backend logic to retrieve data
Forest Admin allows you to code how the data powering any given chart. To do it, select the API tab in the Data section, and fill the API endpoint URL:
* If the chart is part of the global dashboard, then the URL should be `/forest/_charts/`
* If the chart is part of the Analytics tab of a specific collection, then the URL should be: `/forest/_charts//`
To make the code easier to read, all the code snippets below should be wrapped in the following code.
```typescript
import type { Agent } from '@forestadmin/forest-cloud';
import { Schema } from '../typings';
export default function customizeAgent(agent: Agent) {
// Insert the code snippet here.
}
```
To create a chart, you can use the `agent.addChart()` method.
Arguments:
* `name`\* *String*: The name of the chart.
* `handle`\* *Function*: A function that has the `context` and `resultBuilder` as arguments.
```typescript
agent.addChart('monthlyRecurringRevenue', async (context, resultBuilder) => {
// Your business logic to retrieve data here.
return resultBuilder.value(10000000);
});
```
{% hint style="info" %}
If you want to learn more about creating custom charts, you can find further explanations and examples [here](https://app.gitbook.com/s/9UN5oBJhgzLadOqi7jx6/agent-customization/charts#from-your-agent).
{% endhint %}
### Coding the visualization
If you need to create custom charts, you can also create the right visuals using HTML, CSS, and JavaScript, you can make unique visualizations
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.forestadmin.com/cloud/code-customization/charts.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
