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.

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:

"options": {
    "indexAxis": "y"
}

Setting indexAxis to "y" produces a horizontal bar chart; the default "x" produces a vertical one.

Below is a configuration example👇.

[
    {
        "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 👇.