# Data visualization

### Adding Data Tools to Your Agent

To enable your agent to design graphs and charts with enhanced visualization capabilities, you can add the Data Tools feature during the agent creation process or when editing an existing agent.

<figure><img src="/files/3s3k3qTwwlgaD3zypMCN" alt=""><figcaption></figcaption></figure>

**During agent creation:**

* In the Tools section (located in the Knowledge & Tools page), you'll find the Data Tools option with a bar chart icon.
* Check the "Data tools" checkbox to give your agents the ability to design graphs and charts.
* This tool enhances your agent's capability to create standard React-based charts and visualizations.

**When editing an existing agent:**

* Click the three dots on your agent's card and select "Edit Agent"
* Navigate to the Tools section
* Toggle the Data Tools option on or off as needed

**Data Tools Capabilities:** Once enabled, your agent will be able to:

* Create professional charts and graphs using React components
* Design various visualization types including bar charts, line graphs, pie charts, and more
* Generate clean, responsive chart layouts
* Work with data to create meaningful visual representations
* Produce charts that integrate seamlessly with web applications

This tool adds specialized instructions to your agent's system message, optimizing it for creating standard React-based chart components that are widely compatible and easy to implement in web projects.

<figure><img src="/files/FqUCHaJYXtSc26nNiiod" alt=""><figcaption></figcaption></figure>


---

# 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.calk-ai.com/agents/tools-you-can-give-to-agent/data-visualization.md?ask=<question>
```

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.