> 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.
Six of the chart types, all built from the same Opportunity query
## Configuration
To configure the Chart, select it on the canvas. The **Edit Chart** panel opens on the right with two tabs: **Properties** and **Style**. The sections below mirror the Properties tab.
The Chart Properties tab, with a Query data source and its data mappings
### 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
The **Data Mappings** section turns your records into chart series. Which mappings appear depends on the chart type.
| Mapping | What it defines | Available for |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- |
| **Bars** (dimensions) | The grouping: what goes on the axis, or becomes the slices and segments. Set a **Field**, an optional **Group** for date grouping (Year, Quarter, Month, Week, Day and the combined variants), and **Display Full Month Label** to spell months out in full. | Every type except Gauge and Flat Gauge |
| **Bar Length** (measures) | The number actually drawn: the height of a bar, the size of a slice, the value on a gauge. Its four settings are below. | Every type |
| **Bar Segments** | Splits each bar or pyramid into stacked sub-segments. Takes the same **Field**, **Group** and **Display Full Month Label** as Bars. | Stacked Bar, Stacked Column, Stacked Pyramid |
| **Lines** | Splits a line series into several lines. Same settings as Bars. | Line |
Each **Bar Length** entry has four settings:
| Setting | What it does |
| ----------------------- | --------------------------------------------------------------------------------------- |
| **Field** | The Salesforce numeric field to aggregate. |
| **Measures** | The aggregation: Average, Count, Maximum, Median, Minimum, Sum, Unique, First, or Last. |
| **Format Style Preset** | How the result is displayed: number, rounded number, percent, currency, or custom. |
| **Multiplier** | An optional multiplier applied to the aggregated value. Default: 1. |
### Content
The Content group controls the visual identity of the chart, and applies to every type.
| Property | What it does |
| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Type** | The chart type chosen when you added the component. You can change it here at any time, to any of the 12 presets. |
| **Title** | A heading displayed at the top of the chart. |
| **Subtitle** | Secondary text displayed below the title. |
| **Title Font Size** | 10, 11, 12, 14, 16, 18, 20, 24, 32, 48, or 64. Default: 14. |
| **Subtitle Font Size** | The same sizes as the title. Default: 12. |
| **Title Alignment** | Left (default), Center, or Right. Applies to the title, the subtitle and the description together. |
| **X Title** | Label for the horizontal axis. |
| **Y Title** | Label for the vertical axis. |
| **Palette** | The colors used for the series: Aurora (default), Nightfall, Wildflowers, Sunrise, Bluegrass, Ocean, Heat, Dusk, Pond, Watermelon, Fire, Water, Lake, Mineral, or Extension. |
### Chart
Properties in the Chart group appear and disappear with the selected type, so they are grouped below by the types they belong to.
#### 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** | Normalizes stacked values so each stack sums to 100%, which makes proportions easy to compare. 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. |
| **Show Total** | Displays the total in the center of the donut. |
| **Total Font Size** | Auto (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°. |
#### 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.
| Property | What it does |
| ------------------ | ------------------------------------------------- |
| **Min Range** | The bottom of the scale. Default: 0. |
| **Max Range** | The top of the scale. Default: 100. |
| **Show Min Range** | Displays the minimum as a label. Flat Gauge only. |
| **Show Max Range** | Displays the maximum as a label. Flat Gauge only. |
### Axes
Axis-based types only: Bar, Stacked Bar, Column, Stacked Column, Line, Pyramid, Stacked Pyramid, Combo and Metrics Radar.
| 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. |
| **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. |
| **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 three 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. |
### 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 %}
## Styling
Configure the Chart's appearance from the **Style** tab of the Edit Chart panel.
{% tabs %}
{% tab title="Margin" %}
Controls the *outer* spacing around the chart.
* **Top / Right / Bottom / Left:** Adjust the space on each side.
{% 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 %}
{% tab title="Border" %}
Customizes the border surrounding the chart.
* **Color / Size / Style / Radius:** Set the border color, thickness, style, and corner rounding.
{% endtab %}
{% endtabs %}
## 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 Display Inside Chart Area to move the legend into the chart space, or enable Reverse Item Order 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=&goal=
```
`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.
