Chart

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.

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.

The Data Source determines where the chart data comes from.

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:

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.

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

What a measured entry holds

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.

Type selects the chart style:

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:

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.

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.

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.

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.

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

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

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.

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.

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

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.

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.