# Grid - Charts

GridMate **Charts** feature allows you to display aggregated data from your grid in a graphical format. It helps users understand their filtered data at a glance. The Chart feature is available for **GridMate Smart Grids**.

## Enable Charts

To enable the **Charts** option:

1. Edit the Lightning page in the App Builder.
2. Select the Grid.
3. Scroll down until you see the **"Charts"** property.
4. Paste in your charts configuration.

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

## Charts Configuration

The **Charts** property accepts a JSON array, where each object in the array defines a single chart. You can configure as many charts as you'd like.

Each chart object is built from a few required fields that describe *what* to display, plus optional fields for labeling and fine-tuning the visual output.

### **Required fields**

* `title` — The heading displayed above the chart. This is what users see, so make it descriptive (e.g., `"Revenue by Stage"` rather than `"Chart 1"`).
* `chartType` — The visualization style. Supported values are `"pie"`, `"bar"`, and `"donut"`. The chart type determines the default orientation and shape; see the `options` field below for variations like horizontal bars.
* `groupByField` — The Salesforce field API name used to group records into chart segments or categories. Each unique value in this field becomes a slice (pie/donut) or a bar. For example, using `"StageName"` on Opportunities produces one segment per stage.
* `aggregateField` — The Salesforce field API name whose values are aggregated within each group. This is the numeric or currency field that determines the size of each segment.
* `aggregateOp` — The aggregation operation applied to `aggregateField`. Common values include `"SUM"`, `"COUNT"`, `"AVG"`, `"MIN"`, and `"MAX"`.
* `aggregateType` — The data type of the aggregated value, used for formatting labels and tooltips. Use `"currency"` for monetary values, `"number"` for plain numerics, and `"percent"` for percentages.

### **Optional fields**

* `datasetLabel` — A label shown in the chart's legend or tooltip describing the dataset (e.g., `"Sum of Amount"`). Useful when the title alone doesn't make the metric explicit.
* `options` — A nested object passed through to the underlying chart renderer for advanced customization. The most common use is flipping a bar chart's orientation:

```json
"options": {
    "indexAxis": "y"
}
```

{% hint style="info" %}
Setting `indexAxis` to `"y"` produces a horizontal bar chart; the default `"x"` produces a vertical one.
{% endhint %}

Below is a configuration example👇.

```json
[
    {
        "title": "Revenue by Stage (pie)",
        "chartType": "pie",
        "groupByField": "StageName",
        "aggregateField": "Amount",
        "aggregateOp": "SUM",
        "aggregateType": "currency"
    },
    {
        "title": "Revenue by Stage (H-Bar)",
        "chartType": "bar",
        "groupByField": "StageName",
        "aggregateField": "Amount",
        "aggregateOp": "SUM",
        "aggregateType": "currency",
        "datasetLabel": "Sum of Amount"
    },
    {
        "title": "Revenue by Stage (V-Bar)",
        "chartType": "donut",
        "groupByField": "StageName",
        "aggregateField": "Amount",
        "aggregateOp": "SUM",
        "aggregateType": "currency",
        "datasetLabel": "Sum of Amount",
        "options": {
            "indexAxis": "y"
        }
    }
]
```

## Charts Setup

Below is a step by step tutorial to configure the **Grid - Charts** 👇.

{% embed url="<https://youtu.be/zxh8i7c4fQg>" %}


---

# 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.gridmate.io/advanced-guides/grid-charts.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.