> 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/dynamic-components/components/chart.md).

# Chart

The Avonni Chart component turns Salesforce data into interactive visualizations — bar charts, column charts, line charts, donuts, gauges, pyramids, radar charts, and more — directly on a Lightning Page. No code required.

## Overview

When you add a Chart to the canvas, you choose the chart type from a preset list: **Bar Chart**, **Column Chart**, **Combo Chart**, **Donut Chart**, **Flat Gauge Chart**, **Gauge Chart**, **Line Chart**, **Metrics Radar Chart**, **Pyramid Chart**, **Stacked Bar Chart**, **Stacked Column Chart**, or **Stacked Pyramid Chart**. The chart type is selected at the time you add the component; all 12 presets are variants of the same underlying Chart component and share the same configuration panel.

## Configuration

To configure the Chart, select it on the canvas. The **Edit Chart** panel opens on the right with two tabs: **Properties** and **Interactions**. The sections below mirror the Properties tab.

### Data Source

Before you can display anything, you must tell the Chart where to get its data. Two sources are supported:

| Source       | Description                                                                                                             |
| ------------ | ----------------------------------------------------------------------------------------------------------------------- |
| **Query**    | Fetch records directly from a Salesforce object. Choose the object, add filters to limit results, and set a sort order. |
| **Variable** | Use a page variable that already holds the records you want to chart.                                                   |

### Data Mapping

When using a dynamic data source, configure the **Data Mappings** section to tell the component how to translate your records into chart series. The mapping properties available depend on the chart type selected.

**Bars (Dimensions)**

Bars define the grouping dimension — what goes on the axis or becomes the slices/segments of the chart. Add one or more bars, each with a **Field** (the Salesforce field to group by) and an optional **Group** (date grouping: Year, Quarter, Month, Week, Day, and combined variants). You can also enable **Display Full Month Label** to use full month names when grouping by month.

*Available for: Bar, Stacked Bar, Column, Stacked Column, Line, Combo, Pyramid, Stacked Pyramid, Donut, Metrics Radar.*

**Bar Length (Measures)**

Bar Length defines the numeric measure displayed in the chart — the height of a bar, the size of a slice, the value on a gauge. For each measure, set:

* **Field** — the Salesforce numeric field to aggregate.
* **Measures** — the aggregation method: Average, Count, Maximum, Median, Minimum, Sum, Unique, First, or Last.
* **Format Style Preset** — how the value is displayed (number, rounded number, percent, currency, or custom).
* **Multiplier** — an optional multiplier applied to the aggregated value (default: 1).

*Available for: Bar, Stacked Bar, Column, Stacked Column, Line, Combo, Pyramid, Stacked Pyramid, Donut, Metrics Radar, Gauge, Flat Gauge.*

**Bar Segments (Optional)**

Bar Segments split each bar or pyramid into stacked sub-segments. Set a **Field** and optional **Group** and **Display Full Month Label** in the same way as Bars.

*Available for: Stacked Bar, Stacked Column, Stacked Pyramid only.*

**Lines (Optional)**

Lines add an additional grouping to split a line chart series into multiple lines. Set a **Field**, optional **Group**, and optional **Display Full Month Label**.

*Available for: Line only.*

### Content

The Content group controls the visual identity of the chart.

**Type**

The chart type selected when you added the component. You can change it here at any time. Options: Bar, Stacked Bar, Column, Stacked Column, Pyramid, Stacked Pyramid, Line, Combo, Metrics Radar, Gauge, Flat Gauge, Donut.

**Title**

A heading displayed at the top of the chart.

**Subtitle**

Secondary text displayed below the title.

**Title Font Size**

Font size for the title. Options: 10, 11, 12, 14, 16, 18, 20, 24, 32, 48, 64. Default: 14.

**Subtitle Font Size**

Font size for the subtitle. Options: same as Title Font Size. Default: 12.

**Title Alignment**

Horizontal alignment for the title, subtitle, and description. Options: Left (default), Center, Right.

**X Title**

Label for the horizontal (X) axis.

**Y Title**

Label for the vertical (Y) axis.

**Palette**

Color scheme used to render chart series. Options: Aurora (default), Nightfall, Wildflowers, Sunrise, Bluegrass, Ocean, Heat, Dusk, Pond, Watermelon, Fire, Water, Lake, Mineral, Extension.

### Chart

The Chart group controls display options for chart data. Properties in this group appear or disappear based on the selected chart type.

**Show Values**

If enabled, the numeric value is displayed on each bar, column, pyramid segment, or donut slice. *Requires: Type = Bar, Stacked Bar, Column, Stacked Column, Pyramid, Stacked Pyramid, or Donut.*

**Normalize Values**

If enabled, stacked values are normalized so each stack sums to 100%, making proportions easy to compare. *Requires: Type = Bar, Stacked Bar, Column, Stacked Column, Pyramid, or Stacked Pyramid.*

**Axis Mode**

Controls how multiple series are arranged. Options: Single Axis (default), Dual Axis, Small Multiples. *Requires: Type = Bar, Stacked Bar, Column, Stacked Column, Line, Pyramid, Stacked Pyramid, Combo, or Metrics Radar.*

**Show Band Value**

If enabled, shows the numeric value on the gauge band. *Requires: Type = Gauge.*

**Show Band Percentage**

If enabled, shows the percentage value on the gauge band. *Requires: Type = Gauge.*

**Show Band Range**

If enabled, shows the min/max range below the gauge. *Requires: Type = Gauge.*

**Show Band Label**

If enabled, shows text labels on the colored gauge bands. *Requires: Type = Gauge.*

**Gauge Angle**

Sweep angle of the circular gauge in degrees. Options: 90°, 120°, 180°, 240° (default), 270°. *Requires: Type = Gauge.*

**Donut Center Size**

Size of the hollow center of the donut as a percentage. Options: 0% through 100% in 10% increments. Default: 60%. *Requires: Type = Donut.*

**Show Percentages**

If enabled, each donut slice is labeled with its percentage of the total. *Requires: Type = Donut.*

**Show Total**

If enabled, the total value is displayed in the center of the donut. *Requires: Type = Donut.*

**Total Font Size**

Font size for the total value in the donut center. Options: Auto (default), 10–64. *Requires: Show Total = enabled.*

**Combine Small Groups into "Others"**

If enabled, small donut slices are merged into a single "Others" slice for a cleaner visualization. *Requires: Type = Donut.*

**Show Points**

If enabled, a dot is displayed at each data point on a line or radar. *Requires: Type = Line, Combo, or Metrics Radar.*

**Show Values in Chart Lines**

If enabled, the numeric value is shown at each data point on a line. *Requires: Type = Line or Combo.*

### Range Values

The Range Values group appears only for gauge and flat-gauge chart types. It sets the numeric scale of the gauge.

**Min Range**

The minimum value on the gauge scale. Default: 0. *Requires: Type = Gauge or Flat Gauge.*

**Max Range**

The maximum value on the gauge scale. Default: 100. *Requires: Type = Gauge or Flat Gauge.*

**Show Min Range**

If enabled, the minimum range value label is displayed on the flat gauge. *Requires: Type = Flat Gauge.*

**Show Max Range**

If enabled, the maximum range value label is displayed on the flat gauge. *Requires: Type = Flat Gauge.*

### X-Axis

The X-Axis group appears for axis-based chart types (Bar, Stacked Bar, Column, Stacked Column, Line, Pyramid, Stacked Pyramid, Combo, Metrics Radar).

**Hide X Axis**

If enabled, the horizontal axis line and tick marks are hidden.

**Hide X Title**

If enabled, the X axis label set in **X Title** is hidden while the axis itself remains visible.

### Y-Axis

The Y-Axis group appears for the same axis-based chart types as X-Axis.

**Hide Y Axis**

If enabled, the vertical axis line and tick marks are hidden.

**Hide Y Title**

If enabled, the Y axis label set in **Y Title** is hidden while the axis itself remains visible.

**Use Log Scale**

If enabled, the Y axis uses a logarithmic scale instead of linear. Useful when data spans several orders of magnitude.

### Legend

**Show Legend**

If enabled, a legend is displayed identifying which color corresponds to which series.

**Show Legend Header**

If enabled, a title is shown above the legend.

**Show Legend Inside Chart Area**

If enabled, the legend is placed inside the chart area rather than beside it.

**Legend Reverse Ordering**

If enabled, the order of items in the legend is reversed.

### Tooltip

The Tooltip group controls what information appears when a user hovers over a chart element. It appears for most chart types (not for Gauge or Flat Gauge).

**Tooltip Show Dimensions**

If enabled, the grouping dimension value (e.g. "Stage: Negotiation") is shown in the tooltip.

**Tooltip Show Measures**

If enabled, the numeric measure value (e.g. "Amount: $50,000") is shown in the tooltip.

**Tooltip Show Percentage**

If enabled, the percentage contribution is shown in the tooltip.

### Set Component Visibility

All components support conditional visibility — see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md).

## Use Cases

### Quick Start: Opportunity Pipeline Chart

Build a chart showing open opportunities grouped by stage in under 5 minutes.

{% stepper %}
{% step %}

#### Create a new Dynamic Component

* Open the Avonni Dynamic Components App.
* Create a new component.
* From the component list on the left, drag **Chart** onto the canvas
  {% endstep %}

{% step %}

#### Configure the Data Source

* Select the component on the canvas.
* In the Properties Panel, set **Data Source** to **Query**.
* **Object**: Select `Opportunity`.
* **Filter**: `IsClosed = false` (to show only open opportunities)

> **Why**: This ensures the chart displays only active deals.
> {% endstep %}

{% step %}

#### Set the Chart Type

* In the Properties Panel, find **Chart Type** and select **Bar**.
* This creates a horizontal bar chart by default.
  {% endstep %}

{% step %}

#### Configure Data Mappings

* Scroll to **Data Mappings** section.
* **Bars**: Click **Add** and set:
  * **Field**: `StageName`
  * **Group**: Leave blank
* **Bar Length**: Click **Add** and set:
  * **Field**: `Amount`
  * **Measures**: `SUM`

> **Why**: Bar Length tells the chart what values to measure (sum of opportunity amounts). Bars defines what to group by (stage).
> {% endstep %}

{% step %}

#### Add Labels and Legend

* Enable **Show Legend** (toggle on).
* Enable **Show Values** (toggle on) to display amounts on each bar.
* Set **Title**: "Open Pipeline by Stage"
* Set **Y Title**: "Stage" and **X Title**: "Amount ($)"
  {% endstep %}
  {% endstepper %}

## Interactions

[Interactions](/dynamic-components/component-builder/interactions.md) define what happens when a user interacts with the chart. Configure them from the **Interactions** tab of the Edit Chart panel.

**On Item Click**

Fires when a user clicks a bar, column, slice, data point, or gauge segment. Use this to navigate to a record, open a flow screen, or update a field based on the clicked data point.

## Troubleshooting Common Issues

* **Chart shows "No Data" or is blank** — The query filter may be too restrictive, or no records match the criteria. Check the filter condition in a Report or via SOQL, verify that the Bars and Bar Length fields exist on the selected object and contain values, and confirm the page variable is populated before the Chart renders if using a variable data source.
* **Chart shows unexpected colors or grouping** — In Data Mappings, confirm Bars and Bar Length are set to the correct fields. If Combine Small Groups into "Others" is enabled, small donut slices are merged — disable it to see all individual groups.
* **The gauge shows an incorrect range** — Check Min Range and Max Range in the Range Values section. For a win-rate gauge (0–100%), set Min Range to 0 and Max Range to 100. Use Show Min Range / Show Max Range (Flat Gauge only) to display those values as labels on the gauge.
* **Legend overlaps or takes up too much space** — Enable Show Legend Inside Chart Area to move the legend into the chart space, or enable Legend Reverse Ordering if space is still tight. Increasing the component container size on the page also helps. For donuts, enable Combine Small Groups into "Others" to reduce the number of legend entries.


---

# 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/dynamic-components/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.