# Chart

Renders a chart from inline JSON data. Pick a chart type (bar, line, area, pie), provide a JSON array of data, and a config that maps each data key to a label and colour. Chart handles the rendering with grid lines, legend, and tooltip out of the box.

Use it for any in-page visualisation — dashboards, reports, summaries.

![Chart block rendered as a bar chart with title, two data series, grid lines, and legend](/files/q3kEvGNDlDFssm9Vn6p2)

## Available in

* All module types

In practice Chart lives mostly in **Dashboard**, **Page**, and **Reports** modules.

## When to use

* Dashboard tiles showing trends over time (line, area).
* Bar charts comparing categories (sales by department, products by category).
* Pie charts for proportional breakdowns (payment method mix, status distribution).
* Anywhere you have a small structured dataset and want a quick visualisation.

For tabular data, use **Report Widget**. For single-value KPIs, use **Stats**.

## Settings

| Setting         | Description                                                                                      |
| --------------- | ------------------------------------------------------------------------------------------------ |
| **Title**       | Chart heading shown above the chart.                                                             |
| **Description** | Optional supporting text below the title.                                                        |
| **Chart Type**  | Bar, Line, Area, or Pie. Default: Bar.                                                           |
| **Data**        | A JSON array of objects — each object is a data point.                                           |
| **Config**      | A JSON object mapping each data key to `{ label, color }`. Drives the legend and series colours. |
| **X Axis Key**  | The field name in the data objects that's used for the X-axis category labels.                   |
| **Data Keys**   | Comma-separated list of fields in the data to plot as series (e.g. `desktop,mobile`).            |
| **Show Grid**   | Display grid lines. Default: Yes.                                                                |
| **Show Legend** | Display the legend. Default: Yes.                                                                |
| **Min Height**  | CSS height value for the chart container. Default: `300px`.                                      |

## How it works

Chart parses the JSON data and config at render time. If the JSON is invalid or the data isn't an array, it shows an error card with the parse error — easier to spot than a silent failure.

For pie charts, if the config doesn't define colours, the chart cycles through default colours automatically.

{% hint style="warning" %}
Chart data is **inline JSON**, not a saved-search query. For dynamic or query-driven data, use **Report Widget** instead. Chart is best for fixed datasets you've prepared upfront.
{% endhint %}

## Examples

**Sales by month bar chart.**

* Chart Type: Bar
* Data: `[{"month":"Jan","sales":12400},{"month":"Feb","sales":13800},...]`
* X Axis Key: `month`
* Data Keys: `sales`
* Config: `{"sales":{"label":"Sales","color":"#3b82f6"}}`

**Payment mix pie chart.**

* Chart Type: Pie
* Data: `[{"method":"Cash","count":42},{"method":"Card","count":67},{"method":"Other","count":8}]`
* X Axis Key: `method`
* Data Keys: `count`

## Related

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Stats</strong></td><td>For single-value KPI displays.</td><td><a href="/pages/g4CC12n7b4DsCIlgoRn0">/pages/g4CC12n7b4DsCIlgoRn0</a></td></tr><tr><td><strong>Report Widget</strong></td><td>For dynamic tabular data driven by saved searches.</td><td><a href="/pages/iL4LHW8eadVrU4Dz2iRe">/pages/iL4LHW8eadVrU4Dz2iRe</a></td></tr><tr><td><strong>Common Patterns</strong></td><td>Recipes that combine charts with other dashboard blocks.</td><td><a href="/pages/nuIC9dFKJRLG7aUU3PNh">/pages/nuIC9dFKJRLG7aUU3PNh</a></td></tr></tbody></table>


---

# 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.in8sync.com/client-admin-guide/active-workflows/getting-started/content-components/chart.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.