> 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

## Overview

<figure><img src="/files/iat5kkqHDnN78ewRWTut" 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, and donut 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 three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.

### 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 represent categories and which represent measured values.

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

For example, on a bar chart:

* **Bars** — the field whose values become the bar categories (e.g., a Region field)
* **Bar Length** — the field whose values determine bar length (e.g., a Sales Amount field)

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

**Example: Sales by Region**

1. **Data Source:** Select the flow variable containing Region and Sales Amount fields.
2. **Data Mappings:** Map Region → Bars; Sales Amount → Bar Length.

This creates a bar chart where each region has a bar whose length reflects its sales amount.

### 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="/files/Vc0em1UDaWKN8HDJlIbj" alt=""><figcaption></figcaption></figure>

### Stacked Bars

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

<figure><img src="/files/9eMXI949bTgkcyuLMQKs" 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="/files/N3MSgRLMquNKLmJTTj4u" alt=""><figcaption></figcaption></figure>

### Stacked Columns

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

<figure><img src="/files/RY47tiuH4gxqAXim2SeZ" 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="/files/EPEagTHAYiIuZIkCc0hc" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Combo" %}

### **Combo**

Combines bars and lines in one chart — useful for comparing a volume metric alongside a rate or trend.
{% endtab %}

{% tab title="Metrics Radar" %}

### **Metrics Radar**

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

<figure><img src="/files/9EhmbS4oWz7XpEaeMggi" 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 %}
{% 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.

**Title Alignment** sets the horizontal alignment of the title.

**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="/files/x6bL1LI4a3scuPIngxfs" alt="" width="563"><figcaption></figcaption></figure>

### Chart

Fine-tune the chart's display behavior.

**Show Values** displays actual data values on chart items (on top of bars, next to data points, etc.).

**Normalize Values** transforms stacked data to a 0–100% scale — useful for comparing compositions regardless of total size.

**Axis Mode** changes how axes are arranged:

* **Single Axis** — all data plotted against one vertical axis (default).
* **Dual Axis** — two vertical axes with different scales, useful when comparing metrics with different units.
* **Small Multiples** — creates a series of smaller charts, each showing a different data subset on the same scale.
* **Auto Fit** — the chart automatically adjusts its layout to fit the available space.

### Range Values

Configure minimum and maximum range values for gauge and flat gauge charts. These can be set as fixed numbers or calculated from a SOQL query.

### X-Axis

**Hide X Axis** removes the horizontal axis. **Hide X Title** hides only the axis label.

### Y-Axis

**Hide Y Axis** removes the vertical axis. **Hide Y Title** hides only the axis label. **Use Log Scale** switches the Y axis to a logarithmic scale.

### Legend

**Show Legend** toggles the legend on or off.

**Show Legend Header** adds a title to the legend box.

**Show Legend Inside Chart Area** places the legend within the chart area instead of beside it.

**Legend Reverse Ordering** reverses the order of items in the legend.

### Tooltip

Configure what appears in the tooltip when users hover over a data point:

* **Tooltip Show Dimensions** — shows the category or period label.
* **Tooltip Show Measures** — shows the measured value.
* **Tooltip Show Percentage** — shows the percentage of the data point relative to the total (applicable to donut and stacked charts).

## 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.
  {% endtab %}
  {% endtabs %}

***

## 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:

```
GET https://docs.avonnicomponents.com/flow/flow-components/chart.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.