> For the complete documentation index, see [llms.txt](https://docs.diaflow.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.diaflow.io/studio/nodes/outputs-apps/chart-output.md).

# Chart output

Show chart-ready business data as a visual in your app.

Chart output shows chart-ready data from an earlier node as a visual in your app.

Use it when people need a quick visual view of business results.

<figure><img src="https://3864624312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRdo1pkMnofwxf3lpWftw%2Fuploads%2FvK274eqmCVuyEdbQgoQZ%2FChart.png?alt=media&amp;token=5ae62555-9b9b-466f-bc46-7b7d979818df" alt=""><figcaption></figcaption></figure>

### Before you start

Choose a field from an earlier node that returns chart-ready data.

If your data is not ready yet, use [Convert JSON to Chart Data](/studio/nodes/action-nodes/convert-json-to-chart-data.md) first.

<figure><img src="https://3864624312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRdo1pkMnofwxf3lpWftw%2Fuploads%2FgI6QoLkaEM5yokC6qODb%2FOutput_list.png?alt=media&amp;token=d04252c1-645c-4c53-9061-ccde6741e161" alt=""><figcaption></figcaption></figure>

### How to set it up

1. In the **Output** node, click **+ Add**.
2. Select a field with chart-ready data from the list of earlier nodes.
3. Click **Ok**.
4. Choose **Chart** as the output type.
5. Enter a clear **Title**.
6. Click **Ok** and test the flow.

### Settings

| Setting     | What it does                                                                            |
| ----------- | --------------------------------------------------------------------------------------- |
| Output type | Sets how the selected field is shown in the app. Choose **Chart** for chart-ready data. |
| Title       | The label shown above the chart, such as `Sales by month`.                              |

### Good business uses

* Show sales trends over time.
* Compare team or region performance.
* Summarize survey results visually.

### Next steps

* Go back to [Outputs (Apps)](/studio/nodes/outputs-apps.md).
* Prepare chart-ready data with [Convert JSON to Chart Data](/studio/nodes/action-nodes/convert-json-to-chart-data.md).
* Compare it with [Text output](/studio/nodes/outputs-apps/text-output.md).