# Chart Widget

A live-data chart for dashboards. Configure a data source (SuiteQL query or saved search), pick a chart type (bar, line, area, pie), map the data to axes and series, and the widget renders the result.

This is the **dashboard widget** variant of charting. For static, manually-fed charts in content sections, use **Chart** instead. Chart Widget is for charts that should reflect live NetSuite data without manual updates.

## Available in

* Dashboard modules
* Reports modules
* Page modules

## When to use

* Dashboard pages where a chart should always reflect current sales, queue activity, transaction counts, or any other live metric.
* Reports modules where the chart needs to be a dashboard-style widget (with refresh, configurable data source, etc.).
* Anywhere you'd otherwise build a chart by hand from query results — Chart Widget collapses query + render into one block.

## Settings

The block opens a configuration modal that handles the data source, axes, series, and styling:

| Setting                   | Description                                                      |
| ------------------------- | ---------------------------------------------------------------- |
| **Title**                 | Heading shown above the chart.                                   |
| **Description**           | Optional supporting copy below the title.                        |
| **Chart Type**            | *Bar*, *Line*, *Area*, or *Pie*.                                 |
| **Data Source**           | The SuiteQL query or saved search that provides the data.        |
| **X Axis Key**            | Which column from the data source maps to the X axis.            |
| **X Axis Label / Format** | Display label and value format (date, number, currency).         |
| **Y Axis Keys**           | Comma-separated list of columns for the Y axis (one per series). |
| **Y Axis Label / Format** | Display label and value format.                                  |
| **Series**                | Per-series configuration — labels, colours, formats.             |
| **Pie Slice Colors**      | (Pie only) Color per slice.                                      |
| **Show Grid**             | Whether to render the chart grid lines.                          |
| **Show Legend**           | Whether to render the chart legend.                              |
| **Min Height**            | Minimum chart height (e.g. *300px*).                             |

## How it works

1. The configuration modal lets you pick a data source and map columns to axes.
2. At render time, the widget runs the query, transforms the rows into Recharts data, and renders the configured chart type.
3. Hover tooltips, legend interactions, and (for time-series) brush/zoom are wired up automatically.
4. Re-runs the query when relevant page state changes (e.g. date filters elsewhere on the page).

## Examples

**Daily sales chart.** Bar chart, data source *daily\_sales\_query*, X axis *date* (date format), Y axis *total* (currency format). Drop on a sales dashboard for at-a-glance daily revenue.

**Order-status breakdown.** Pie chart, data source *order\_status\_count*, slice colours per status. Useful at the top of an operations page.

**Multi-series trend.** Line chart with multiple Y series — *Sales*, *Refunds*, *Net*. Each becomes its own line, automatically coloured from the configured palette.

## Common issues

* **Chart shows "No data"** — the data source returned zero rows. Check the query and any filters in scope on the page.
* **Wrong values on axis** — verify the X / Y key columns match the data source's actual column names exactly. SuiteQL is case-sensitive for some setups.
* **Slow rendering** — large data sets can slow Recharts. Aggregate in the SuiteQL query rather than fetching raw rows.

## 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>Chart</strong></td><td>Static, manually-fed chart for content sections.</td><td><a href="/pages/TF6MsDgHAeqpfXzQEkOB">/pages/TF6MsDgHAeqpfXzQEkOB</a></td></tr><tr><td><strong>Report Widget</strong></td><td>Generic dashboard widget — table-style data display.</td><td><a href="/pages/iL4LHW8eadVrU4Dz2iRe">/pages/iL4LHW8eadVrU4Dz2iRe</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/report-components/chart-widget.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.