> For the complete documentation index, see [llms.txt](https://docs.gridmate.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.gridmate.io/advanced-guides/grid-charts.md).

# 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>" %}