# 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
