> ## Documentation Index
> Fetch the complete documentation index at: https://private-7c7dfe99-mintlify-8c05c8a2.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Text-to-Chart

> Generate charts from natural language prompts in ClickStack using the AI-powered Text-to-Chart feature.

export const Image = ({img, alt, size}) => {
  return <Frame>
      <img src={img} alt={alt} />
    </Frame>;
};

ClickStack's Text-to-Chart feature allows you to create visualizations by describing what you want to see in plain text. Rather than manually selecting metrics, filters, and group-by fields, you can type a prompt such as "error rates by service over the last 24 hours" and ClickStack will generate the corresponding chart automatically.

This feature uses a large language model (LLM) to convert your text prompt into a query, then builds the visualization in the [Chart Explorer](/clickstack/features/dashboards/overview#navigate-chart-explorer). It works with any configured data source.

<h2 id="prerequisites">
  Prerequisites
</h2>

Text-to-Chart requires an [Anthropic API key](https://console.anthropic.com/). Set the `ANTHROPIC_API_KEY` environment variable when starting ClickStack.

For open source deployments, pass the key as an environment variable. The method varies by deployment type:

<Tabs>
  <Tab title="Docker (All-in-One or Local Mode)">
    ```bash theme={null}
    docker run -e ANTHROPIC_API_KEY='<YOUR_KEY>' -p 8080:8080 -p 4317:4317 -p 4318:4318 clickhouse/clickstack-all-in-one:latest
    ```
  </Tab>

  <Tab title="Docker (HyperDX Only)">
    ```bash theme={null}
    docker run -e ANTHROPIC_API_KEY='<YOUR_KEY>' -p 8080:8080 docker.hyperdx.io/hyperdx/hyperdx-local
    ```
  </Tab>

  <Tab title="Docker Compose">
    Add the variable to your `.env` file or set it directly in the `docker-compose.yaml`:

    ```yaml theme={null}
    services:
      app:
        environment:
          ANTHROPIC_API_KEY: ${ANTHROPIC_API_KEY}
    ```
  </Tab>

  <Tab title="Helm">
    Pass the key using `--set`:

    ```bash theme={null}
    helm install my-hyperdx hyperdx/hdx-oss-v2 \
      --set env[0].name=ANTHROPIC_API_KEY \
      --set env[0].value=<YOUR_KEY>
    ```
  </Tab>
</Tabs>

<h2 id="using-text-to-chart">
  Using Text-to-Chart
</h2>

<Steps>
  <Step>
    <h3 id="navigate-chart-explorer">
      Navigate to Chart Explorer
    </h3>

    Select **Chart Explorer** from the left menu in HyperDX.
  </Step>

  <Step>
    <h3 id="select-data-source">
      Select a data source
    </h3>

    Choose the data source you want to visualize — for example, **Logs**, **Traces**, or **Metrics**.

    <Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8c05c8a2/_TDydWLKO6Z3njo9/images/clickstack/text-to-chart/chart-explorer.png?fit=max&auto=format&n=_TDydWLKO6Z3njo9&q=85&s=0926f49a234340cdbfe0936516b97476" alt="Chart explorer" width="3808" height="760" data-path="images/clickstack/text-to-chart/chart-explorer.png" />
  </Step>

  <Step>
    <h3 id="enter-text-prompt">
      Enter a text prompt
    </h3>

    At the top of the Chart Explorer, locate the **AI Assistant** input. Type a natural language description of the chart you want to create. For example:

    * `Show error rates by service over the last 24 hours`
    * `Latency breakdown by endpoint`
    * `Count of events over time grouped by severity`

    ClickStack converts the prompt into a query and renders the visualization automatically.

    <Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8c05c8a2/_TDydWLKO6Z3njo9/images/clickstack/text-to-chart/text-to-chart.png?fit=max&auto=format&n=_TDydWLKO6Z3njo9&q=85&s=2ff818375c5ecc7824869a8c6bc8e3ff" alt="Text to chart" width="1905" height="969" data-path="images/clickstack/text-to-chart/text-to-chart.png" />
  </Step>
</Steps>

<h2 id="demo-data">
  Trying it with demo data
</h2>

The quickest way to try Text-to-Chart is with the [Local Mode](/clickstack/deployment/local-mode-only) Docker image and the [remote demo dataset](/clickstack/example-datasets/remote-demo-data):

```bash theme={null}
docker run -e ANTHROPIC_API_KEY='<YOUR_KEY>' -p 8080:8080 clickhouse/clickstack-local:latest
```

Navigate to `localhost:8080`. To connect to demo data, go to **Team Settings** and create a new connection with the following details:

* **Connection Name**: `Demo`
* **Host**: `https://sql-clickhouse.clickhouse.com`
* **Username**: `otel_demo`
* **Password**: Leave empty

<Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8c05c8a2/_TDydWLKO6Z3njo9/images/clickstack/text-to-chart/create-connection.png?fit=max&auto=format&n=_TDydWLKO6Z3njo9&q=85&s=3ab55cc1707a70bfb9d4665a240e6648" alt="Create connection" width="3810" height="1502" data-path="images/clickstack/text-to-chart/create-connection.png" />

Then modify each of the sources — **Logs**, **Traces**, **Metrics**, and **Sessions** — to use the `otel_v2` database. For full details on configuring sources, see the [remote demo dataset guide](/clickstack/example-datasets/remote-demo-data).

Once connected, open the **Chart Explorer** and try prompts against the available logs, traces, and metrics.

<h2 id="example-prompts">
  Example prompts
</h2>

The following prompts demonstrate common use cases when working with observability data:

| Prompt                                            | Data source | Description                                    |
| ------------------------------------------------- | ----------- | ---------------------------------------------- |
| `Error count by service over time`                | Logs        | Charts the frequency of errors across services |
| `Average request duration grouped by endpoint`    | Traces      | Shows latency patterns per endpoint            |
| `P99 latency by service`                          | Traces      | Identifies tail latency across services        |
| `Count of 5xx status codes over the last 6 hours` | Logs        | Tracks server error trends                     |

Prompts can reference any column or attribute available in your configured data sources. The more specific the prompt, the more accurate the generated chart.

<h2 id="limitations">
  Limitations
</h2>

* Text-to-Chart currently supports Anthropic as the LLM provider. Support for additional providers, including OpenAI, is planned for future releases.
* Only logs and traces are supported as data sources. Prometheus metrics are not yet supported.
* Chart accuracy depends on the clarity of the prompt and the structure of the underlying data. If a generated chart does not match expectations, try rephrasing the prompt or specifying column names explicitly.

<h2 id="further-reading">
  Further reading
</h2>

* [From text to charts: a faster way to visualize with ClickStack](https://clickhouse.com/blog/text-to-charts-faster-way-to-visualize-clickstack) — blog post introducing the feature
* [Dashboards and visualizations](/clickstack/features/dashboards/overview) — manual chart creation using Chart Explorer
* [Search](/clickstack/features/search) — full-text and property search syntax
* [Configuration](/clickstack/managing/config) — all ClickStack environment variables
