> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/flow-components/chart.md).

# Chart

The Avonni Chart component lets you easily create various interactive charts to visualize your data in Salesforce.

## Overview

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Fgit-blob-559d07c32a72af6ec16049c9c4e5fb6f60cb16a0%2Fimage%20(73).avif?alt=media" alt="" width="375"><figcaption></figcaption></figure>

The Avonni Chart renders interactive data visualizations directly inside a Salesforce Screen Flow. It supports bar, stacked bar, column, stacked column, line, combo, pyramid, stacked pyramid, metrics radar, gauge, flat gauge, donut, heatmap and treemap charts, with customizable titles, axes, legends, tooltips, and color palettes.

***

## Configuration

To configure it, click the component on the Flow screen. The **Edit Chart Component** panel opens on the right with two tabs: **Properties** and **Style**. The sections below mirror the Properties tab.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FuS8HbdkGLIIH4K0PA1ht%2Fchart-properties.png?alt=media" alt="The Chart property editor, Properties tab" width="320"><figcaption><p>The Chart property editor, with the Type, title and palette settings</p></figcaption></figure>

### Data Source

The **Data Source** determines where the chart data comes from.

| Data Source                                                      | Description                                                                | When to Use                                                    |
| ---------------------------------------------------------------- | -------------------------------------------------------------------------- | -------------------------------------------------------------- |
| [**Variable**](/flow/component-builder/data-sources/variable.md) | Connect directly to a Flow collection variable from a Get Records element. | When chart data comes from queried Salesforce records.         |
| [**Query**](/flow/component-builder/data-sources/query.md)       | Write a SOQL query to fetch and aggregate data dynamically.                | Complex data retrieval, large volumes, or computed aggregates. |

### Data Mapping

After choosing your data source, configure **Data Mappings** to tell the chart which fields become categories and which become the numbers it draws.

A chart has only two or three mapping slots, but **the panel renames them for the type you picked**, so the labels in front of you depend on **Type**. The slot that groups your records and the slot that measures them are always the same two, whatever they are called:

| Type                                     | Grouping slot             | Measured slot         | Also                           |
| ---------------------------------------- | ------------------------- | --------------------- | ------------------------------ |
| Bar, Stacked Bar, Column, Stacked Column | **Bars**                  | **Bar Length**        | **Bar Segments**, stacked only |
| Pyramid, Stacked Pyramid                 | **Bars**                  | **Left & Right Axis** | **Bar Segments**, stacked only |
| Line                                     | **X-Axis**                | **Y-Axis**            | **Lines**                      |
| Combo                                    | **X-Axis**                | **Y-Axis**            |                                |
| Metrics Radar                            | **Polygons**              | **Axes**              |                                |
| Donut                                    | **Sliced By**             | **Value**             |                                |
| Gauge, Flat Gauge                        | none                      | **Value**             |                                |
| Heatmap                                  | **X-Axis** and **Y-Axis** | **Value**             |                                |
| Treemap                                  | **Segments**              | **Segment Size**      |                                |

So a bar chart maps a Region field to **Bars** and a Sales Amount field to **Bar Length**, and the same donut maps Region to **Sliced By** and Sales Amount to **Value**.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Fgit-blob-39da49fe2cb6245ae6a40c91afa341e54a4c14b8%2F2024-11-02_13-20-49%20(1).png?alt=media" alt="Data Mappings on a bar chart"><figcaption><p>On a bar chart, the slots read Bars and Bar Length</p></figcaption></figure>

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2F4YE0LjjwaXwfe4qn1vyx%2Fchart-data-mappings-donut.png?alt=media" alt="Data Source and Data Mappings on a donut chart" width="320"><figcaption><p>On a donut, the same two slots read Sliced By and Value</p></figcaption></figure>

Most slots take a single field. **Bars** accepts several on a bar or column chart, **Segments** accepts two on a treemap, and every other slot accepts one.

**What a grouping entry holds**

| Setting                      | What it does                                                                                                                       |
| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| **Field**                    | The Salesforce field whose values become the categories.                                                                           |
| **Group**                    | For a date field, the period to group by: Year, Quarter, Month, Week, Day, Year-Quarter, Year-Month, Year-Week, or Year-Month-Day. |
| **Display Full Month Label** | Spells months out in full. Appears only when **Group** is Month or Year-Month.                                                     |

**What a measured entry holds**

| Setting          | What it does                                                                                                          |
| ---------------- | --------------------------------------------------------------------------------------------------------------------- |
| **Field**        | The Salesforce field to aggregate. The four settings below appear once it is set.                                     |
| **Measures**     | The aggregation: Average, Count, Maximum, Median, Minimum, Sum, Unique, First, or Last.                               |
| **Format Style** | How the result is displayed: Number, Number Rounded, Percent, Percent Rounded, Currency, Currency Rounded, or Custom. |
| **Format**       | A format pattern of your own. Appears only when **Format Style** is Custom.                                           |
| **Multiplier**   | An optional multiplier applied to the aggregated value. Default: 1.                                                   |

**Building a combo chart**

A combo chart is built entirely in its **Y-Axis** slot. Add one entry per series, and set each entry's **Display As** to **Line**, **Bar** or **Dot**. That choice, and not the chart type, is what decides how each series is drawn, so a single Y-Axis entry set to Bar gives you a plain column chart with a combo's settings.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FoBG0zOxayocn9iUoZwc5%2Fchart-combo.png?alt=media" alt="A combo chart drawing one series as bars and another as a line"><figcaption><p>Two Y-Axis entries on a combo chart: total drawn as bars, average drawn as a line</p></figcaption></figure>

{% @arcade/embed url="<https://app.arcade.software/share/BeSSi0oI7AkkeOszaf4P>" flowId="BeSSi0oI7AkkeOszaf4P" %}

### Properties

**Type** selects the chart style:

{% tabs %}
{% tab title="Bar" %}

### **Bar**

Uses horizontal bars to compare categories side by side.

**When to Use:** Compare discrete categories such as sales by region, product popularity, or survey responses.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Fgit-blob-910eec8b6d5df01cfd6c73cbd41acbf28afbb471%2F2023-06-12_14-23-00.png?alt=media" alt=""><figcaption></figcaption></figure>

### Stacked Bars

Bars are divided into segments to show both a total and part-to-whole composition.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Fgit-blob-3ebd909bd7c99d17bdb0bd697f6fe57f6aa82257%2F2023-06-13_10-54-19.png?alt=media" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Column" %}

### **Column**

Uses vertical bars to compare categories.

**When to Use:** Ideal for comparing discrete categories such as sales by region, product popularity, or survey responses.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Fgit-blob-1295de64983ffc7e6daa77fac3c3f3208e0af647%2F2023-06-12_14-31-52.png?alt=media" alt=""><figcaption></figcaption></figure>

### Stacked Columns

Columns are divided into segments showing part-to-whole composition.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Fgit-blob-09794108011b52f68bc81b74dd18859fd9c8964f%2F2023-06-12_14-32-57.png?alt=media" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Line" %}

### **Line**

Plots data points connected by lines to show trends over time or across categories.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Fgit-blob-5e3cd24884b0be5c66317b9e5e3b4717eaf6e425%2F2023-06-12_14-34-49.png?alt=media" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Combo" %}

### **Combo**

Combines bars, lines and dots in one chart, which suits a volume metric shown next to a rate or a trend. Each series is drawn according to its own **Display As** setting in the **Y-Axis** mapping.

**When to Use:** Compare two measures of the same records, such as total and average deal size.
{% endtab %}

{% tab title="Metrics Radar" %}

### **Metrics Radar**

A spider/radar chart showing multiple metrics as axes radiating from a center point.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Fgit-blob-aa1d8a4f14035174828517b60ddf919e657673d1%2FrtaImage.jpeg?alt=media" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Pyramid" %}

### **Pyramid**

Displays data as a triangular shape, ideal for hierarchical data.

### Stacked Pyramid

Pyramid divided into segments for part-to-whole composition.
{% endtab %}

{% tab title="Donut" %}

### **Donut**

A circular chart that shows each value as a proportional slice of a whole, with a configurable center that can display a total.

**When to Use:** Show part-to-whole composition, such as the share of cases by status.
{% endtab %}

{% tab title="Gauge" %}

### **Gauge**

A radial gauge that plots a single value against a minimum/maximum range, with optional band labels, values, percentages, and a configurable sweep angle.

**When to Use:** Track a single KPI against a target, such as quota attainment.
{% endtab %}

{% tab title="Flat Gauge" %}

### **Flat Gauge**

A linear gauge that plots a single value against a range, with optional min and max range labels.
{% endtab %}

{% tab title="Heatmap" %}

### **Heatmap**

A grid coloured by intensity, with a category on each axis and a measured value deciding the shade of every cell.

**When to Use:** Find the dense and empty corners of a two-way breakdown, such as stage against lead source.
{% endtab %}

{% tab title="Treemap" %}

### **Treemap**

Nested rectangles sized by value, so the biggest contributors are the biggest boxes.

**When to Use:** Compare parts of a whole when there are too many of them for a donut to stay readable.
{% endtab %}
{% endtabs %}

**Title** and **Subtitle** add a main title and secondary description above the chart.

**Title Font Size** and **Subtitle Font Size** control their respective text sizes. Default: 14 and 12.

**Title Alignment** sets the horizontal alignment of the title. Default: Left.

**X Title** and **Y Title** label the horizontal and vertical axes.

**Palette** selects the color set used to render chart series:

* **Aurora** — vibrant colors inspired by the aurora borealis.
* **Nightfall** — deep blues and purples, suitable for low-light environments.
* **Wildflowers** — bright, floral-inspired colors.
* **Sunrise** — warm oranges, yellows, and reds.
* **Bluegrass** — cool greens and blues.
* **Ocean** — ocean-inspired blues and greens.
* **Heat** — warm reds, oranges, and yellows for representing intensity.
* **Dusk** — muted purples and blues evoking twilight.
* **Pond** — tranquil greens and blues.
* **Watermelon** — refreshing pinks, greens, and reds.
* **Fire** — fiery reds, oranges, and yellows.
* **Water** — cool blues and greens.
* **Lake** — serene blues and greens.
* **Mineral**, **Extension** — additional available palettes.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Fgit-blob-70a289f66ba111d3f885064840216bedd4749d32%2F2023-06-12_11-24-14.png?alt=media" alt="" width="563"><figcaption></figcaption></figure>

**Palette** accepts one of those 15 names and nothing else. Switch to the mapped input and select a text variable or record field to pick the palette at runtime, and the value it holds must be a palette name: names are case-insensitive, and an empty or unrecognized value — a color such as `#0176d3` or `red` included — falls back to **Aurora**.

To draw a chart in colors of your own, use **Custom Palette** instead.

**Custom Palette** goes one step further: instead of one preset or one brand color, you spell out the exact list of colors the chart cycles through. Click **Add Item** to append a color, then pick it from the color picker or type a value into it. Drag the handle on the left of a row to reorder, and use the **×** on the right to remove one.

Colors are applied to the series in the order they are listed: the first color goes to the first series, the second to the second, and so on. If the chart has more series than you listed colors, the list repeats from the start.

Custom Palette wins over **Palette**. As soon as it holds at least one color, the **Palette** selection is ignored; empty the list to hand control back to **Palette**.

Each entry is a hex code, such as `#0176d3` or, with an alpha channel, `#0176d3ff`. No shades are derived: what you list is exactly what is drawn. Entries that are not hex codes are dropped, and a list left with no color hands the chart back to **Palette**. Charts that use a single color, such as Gauge and Flat Gauge, take the first entry.

Note: when a chart displays several series — a grouped Column or Bar chart with multiple measures, a Donut, a Stacked Column — a single listed color draws every series in that one color. Supply as many colors as the chart has series to keep them distinguishable.

Use **Custom Palette** when the colors carry meaning and cannot be left to a preset — for example a Donut of opportunity stages where Closed Won must be green and Closed Lost red. Listing `#04844b`, `#c23934`, `#0176d3`, `#f28b00` gives those first two stages their expected colors and leaves the rest on brand blue and orange.

To change the colors without editing the screen component, switch the property to the mapped input and select a Text Collection variable instead of listing the values inline.

### Chart

Settings in the Chart group appear and disappear with the selected type, so they are grouped below by the types they belong to.

**Auto Fit** is the one setting every type has. Turn it on and the chart sizes itself to the screen column it sits in, rather than drawing at its own default size.

#### Bar, column and pyramid charts

| Property             | What it does                                                                                                                  |
| -------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| **Show Values**      | Displays the numeric value on each bar, column or segment. Donut charts have it too.                                          |
| **Normalize Values** | Rescales stacked values so each stack sums to 100%, which compares compositions regardless of total size. Stacked types only. |
| **Axis Mode**        | Arranges multiple series: Single Axis (default), Dual Axis, or Small Multiples. Line, Combo and Metrics Radar have it too.    |

#### Donut charts

| Property                               | What it does                                                                           |
| -------------------------------------- | -------------------------------------------------------------------------------------- |
| **Donut Center Size**                  | The size of the hollow center, from 0% to 100% in steps of 10. Default: 60%.           |
| **Show Percentages**                   | Labels each slice with its percentage of the total. Treemap charts have it too.        |
| **Show Total**                         | Displays the total in the center of the donut. Heatmap and Treemap charts have it too. |
| **Total Font Size**                    | Default, or 10 to 64. Requires **Show Total**.                                         |
| **Combine Small Groups into "Others"** | Merges the small slices into a single "Others" slice.                                  |
| **Donut Section Spacing**              | The gap between sections, in degrees, from 0 (default) to 10.                          |

#### Gauge charts

| Property                 | What it does                                                     |
| ------------------------ | ---------------------------------------------------------------- |
| **Show Band Value**      | Shows the numeric value on the band.                             |
| **Show Band Percentage** | Shows the percentage on the band.                                |
| **Show Band Range**      | Shows the minimum and maximum below the gauge.                   |
| **Show Band Label**      | Shows text labels on the colored bands.                          |
| **Gauge Angle**          | The sweep of the dial: 90°, 120°, 180°, 240° (default), or 270°. |
| **Show Min Range**       | Displays the minimum as a label. Flat Gauge only.                |
| **Show Max Range**       | Displays the maximum as a label. Flat Gauge only.                |

#### Line, combo and radar charts

| Property                       | What it does                                                     |
| ------------------------------ | ---------------------------------------------------------------- |
| **Show Points**                | Draws a dot at each data point.                                  |
| **Show Values in Chart Lines** | Shows the numeric value at each data point. Line and Combo only. |

### Range Values

Gauge and Flat Gauge only. This group sets the numeric scale of the dial. **Min range** defaults to 0 and **Max Range** to 100, and either can be a fixed number or a value calculated by a SOQL query.

### Axes

Axis-based types only: Bar, Stacked Bar, Column, Stacked Column, Line, Pyramid, Stacked Pyramid, Combo and Metrics Radar. The panel splits these across an **X-Axis** group and a **Y-Axis** group.

| Property          | What it does                                                                                                                        |
| ----------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| **Hide X Axis**   | Hides the horizontal axis line and its tick marks.                                                                                  |
| **Hide X Title**  | Hides the label set in **X Title**, leaving the axis itself visible. Heatmap charts have it too.                                    |
| **Hide Y Axis**   | Hides the vertical axis line and its tick marks.                                                                                    |
| **Hide Y Title**  | Hides the label set in **Y Title**, leaving the axis itself visible. Heatmap charts have it too.                                    |
| **Use Log Scale** | Puts the vertical axis on a logarithmic scale instead of a linear one, which helps when the data spans several orders of magnitude. |

### Legend

Turn **Show Legend** on to display a key matching each color to its series. The settings below only apply once it is on.

| Property                      | What it does                                                                                          |
| ----------------------------- | ----------------------------------------------------------------------------------------------------- |
| **Position**                  | Where the legend sits: Left, Right (default), Top, or Bottom.                                         |
| **Show Header**               | Adds a title above the legend.                                                                        |
| **Display Inside Chart Area** | Places the legend inside the chart rather than beside it, which buys space when the chart is cramped. |
| **Reverse Item Order**        | Reverses the order of the legend entries.                                                             |

### Tooltip

Controls what appears when a user hovers over a chart element. Available for every type except Gauge and Flat Gauge.

| Property                    | What it does                                                |
| --------------------------- | ----------------------------------------------------------- |
| **Tooltip Show Dimensions** | Shows the grouping value, for example "Stage: Negotiation". |
| **Tooltip Show Measures**   | Shows the numeric value, for example "Amount: $50,000".     |
| **Tooltip Show Percentage** | Shows the percentage contribution.                          |

## Styling

The **Style** tab gives you control over the spacing and dimensions of the chart on the Flow screen. Configure it from the **Style** tab of the Edit Chart panel.

{% tabs %}
{% tab title="Margin" %}
Controls the *outer* spacing around the chart, creating space between it and other elements on the screen.

* **Top / Right / Bottom / Left:** Adjust the space on each side of the chart.
  {% endtab %}

{% tab title="Padding" %}
Controls the *inner* spacing between the chart and its border.

* **Top / Right / Bottom / Left:** Adjust the inner spacing on each side.
  {% endtab %}

{% tab title="Size" %}
Controls the chart's dimensions.

* **Width / Height:** Set fixed dimensions for the chart.
* **Min Width / Max Width / Min Height / Max Height:** Constrain the size within bounds.
* **Overflow:** Control how content that exceeds the bounds is handled.
* **Overflow X / Overflow Y:** Control overflow per axis.
  {% endtab %}
  {% endtabs %}

## Examples

Three complete builds, all starting from the same place: a **Get Records** element that returns Opportunity records into a collection variable. Nothing changes between them except the chart configuration, which is the point. Learn the two mapping slots once and every type follows.

### Pipeline by stage

A bar chart comparing total amount across the stages of the pipeline.

{% stepper %}
{% step %}

#### **Query the records**

Add a **Get Records** element before your screen. Choose the **Opportunity** object, set it to return **All records**, and let it store them in an automatically created collection variable. That collection is everything the chart needs.
{% endstep %}

{% step %}

#### **Add the chart and point it at the collection**

Drag an **Avonni Chart** onto the screen and select it to open the **Edit Chart Component** panel. In **Data Source**, keep **Variable** selected and pick your Opportunity collection under **Data Collection**.
{% endstep %}

{% step %}

#### **Choose the type**

Set **Type** to **Bar**.

Bar rather than Column here for a practical reason: Salesforce stage names are long, and a column chart turns long category labels on their side to fit them. A bar chart lays the same labels flat along the left axis. The mapping is identical either way, so this costs you nothing.
{% endstep %}

{% step %}

#### **Map the two slots**

Open **Data Mappings** and fill the two slots:

* **Bars:** the **Stage** field. This is what groups the records.
* **Bar Length:** the **Amount** field, with **Measures** set to **Sum** and **Format Style** to **Currency Rounded**. This is what measures them.
  {% endstep %}

{% step %}

#### **Label it and show the numbers**

Set **Title** to "Pipeline by stage" and **Subtitle** to "Total amount by stage". Set **X Title** to "Amount" and **Y Title** to "Stage", then turn on **Show Values** in the **Chart** group so every bar carries its own total.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FUGWT84DtYVVOu6OCKDQG%2Fchart-example-bar.png?alt=media" alt="A bar chart of pipeline by stage"><figcaption><p>The finished chart: one bar per stage, each carrying its own total</p></figcaption></figure>
{% endstep %}
{% endstepper %}

### Revenue share by lead source

The same two slots, on a type that renames them. This is the build to read if the labels in your panel do not match the ones above.

{% stepper %}
{% step %}

#### **Start from the same collection**

Add the chart to a screen and point **Data Source** at the same Opportunity collection. Nothing here is specific to a donut yet.
{% endstep %}

{% step %}

#### **Set the type to Donut, then look at Data Mappings again**

Set **Type** to **Donut**.

The two mapping slots have just renamed themselves. Where a bar chart reads **Bars** and **Bar Length**, a donut reads **Sliced By** and **Value**. They are the same two slots doing the same two jobs: one groups the records, the other measures them.
{% endstep %}

{% step %}

#### **Map them**

* **Sliced By:** the **Lead Source** field.
* **Value:** the **Amount** field, with **Measures** set to **Sum** and **Format Style** to **Currency Rounded**.
  {% endstep %}

{% step %}

#### **Turn on the donut settings**

These belong to the donut and appear only for it. In the **Chart** group, leave **Donut Center Size** at 60%, turn on **Show Total** so the center carries the grand total, and turn on **Show Percentages** so each slice is labelled with its share. Turn on **Show Legend** to name the colors.

Set **Palette** to **Ocean** if you want the chart to follow a blue range rather than the **Aurora** default.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FZjb366ZWoBRCpcVIL8DS%2Fchart-example-donut.png?alt=media" alt="A donut chart of revenue share by lead source"><figcaption><p>The finished chart: four lead sources, their shares, and the total in the center</p></figcaption></figure>
{% endstep %}
{% endstepper %}

### Pipeline against a target

A gauge, which is the one shape where the pattern above does not apply: there is nothing to group, so the grouping slot does not exist at all.

{% stepper %}
{% step %}

#### **Set the type to Gauge**

Add the chart, point **Data Source** at the same Opportunity collection, and set **Type** to **Gauge**.
{% endstep %}

{% step %}

#### **Map the one slot there is**

Open **Data Mappings**. A gauge plots a single number, so it offers a **Value** slot and no grouping slot: there is no **Bars**, no **Sliced By**, nothing to put a category field into.

Set **Value** to the **Amount** field, with **Measures** set to **Sum** and **Format Style** to **Currency Rounded**.
{% endstep %}

{% step %}

#### **Give the dial its scale**

A gauge means nothing without a scale to read the value against, and that scale is not derived from your data. Open the **Range Values** group and set **Min range** to 0 and **Max Range** to your target, here 2,000,000.

Either one can be a fixed number or a value calculated by a SOQL query, so a target that lives in a record does not have to be typed in by hand.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FOqQLjFFheTfj0NhS7bip%2Fchart-example-gauge-panel.png?alt=media" alt="The Range Values group and the single Value mapping slot on a gauge" width="320"><figcaption><p>Range Values sets the scale, and Data Mappings offers a Value slot with no grouping slot beside it</p></figcaption></figure>
{% endstep %}

{% step %}

#### **Show the value**

In the **Chart** group, turn on **Show Band Value** so the total is printed under the needle, and set **Title** to "Pipeline against target".

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Fc1vVKduXmN1Yc4fCLtNL%2Fchart-example-gauge.png?alt=media" alt="A gauge chart of pipeline against a target"><figcaption><p>The finished gauge: 1.6M of pipeline read against a 2M target</p></figcaption></figure>
{% endstep %}
{% endstepper %}

***

## Troubleshooting Common Issues

* **"d3 is not defined" error** — The D3.js library is not loaded. Go to **Setup > Installed Packages**, confirm you have the [latest version of Avonni Components](https://appexchange.salesforce.com/listingDetail?listingId=a0N4V00000IDsfbUAD\&tab=e) installed, then go to **Setup > Session Settings** and enable "[Enable Lightning Web Security](https://developer.salesforce.com/docs/platform/lwc/guide/security-lwsec-enable.html) for all orgs".
* **Chart still not rendering after enabling Lightning Web Security** — If you suspect a bug or require further assistance, [contact Avonni support](/flow/help/support-and-troubleshooting.md) for dedicated help.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/flow/flow-components/chart.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.