Charts for Salesforce Screen Flows and Lightning pages

Columns, donuts, funnels, heatmaps and gauges, drawn live from any Salesforce object. Group by a field or a date, sum or count, then put the chart on a Lightning page, inside a Screen Flow or on your Experience site. No report to build first.

Start freeExplore Flow Screen Components
20
chart types
9
ways to aggregate a field
0
reports to build first
Salesforce · Sales
01Set up in the Component BuilderQuery the open pipeline, sum the amount by stage, then pick how to draw it.
02Used on a revenue boardA manager reads the year by month, the product mix and the quarter against its target.

Filmed in real Salesforce orgs: the setup first, then the screen people use.

What it does

Point it at an object, pick how to draw it

Five things people do with it every day. Each one filmed in a real Salesforce org, each one turned on with a property, not with code.

01
One query, twenty charts

Change the type and the same grouped data redraws as columns, a donut, a funnel, a heatmap or a gauge. Nothing else to rebuild.

type · itemsSObjectMapping
02
Group by a field or by date

Group by any field, or by year, quarter, month, week or day when it is a date. Split each bar by a second field to stack it.

bars · group · barSegments
03
Sum, count, average

Pick how each measure adds up and how it reads: dollars without decimals, a percentage, a plain count.

barLength · measures · formatStylePreset
04
A gauge against its target

Show where a number stands between a minimum and a maximum, fixed or read from a query, with the value and the band on the dial.

gaugeAngle · maxRange · showBandValue
05
Hover for the detail

The tooltip gives the group, the value and its share. The legend sits where you put it, in the palette you pick or in your own colors.

tooltipShowPercentage · legendPosition · palette
One query, twenty charts · Component BuilderThe open pipeline redrawn as columns, a donut, a funnel, a heatmap and a gauge
20 chart types, 9 measures, 9 date groupings, by name
As set in Screen Flows and on Lightning pages. Needle and tiered gauges are on Lightning pages only.
Chart types
20
area · bar · calendar-heatmap · choropleth-map · column · combo · donut · flat-gauge · funnel · gauge · heatmap · line · matrix · metrics-radar · pyramid · stacked-bar · stacked-column · stacked-pyramid · treemap · wordcloud
Measures
9, per measured field
sum · count · average · minimum · maximum · median · unique · first · last
Date groupings
9, on date fields
year · quarter · month · week · day · year-quarter · year-month · year-week · year-month-day
Gauge
5 sweep angles
90 · 120 · 180 · 240 · 270
Colors
15 palettes, or your own
aurora · ocean · heat · dusk · … · custom hex colors
Every chart type

20 chart types, one sales team's data.

Each card below is a real Avonni chart on a Lightning page, drawn from the same Salesforce records. Switch the type in the Component Builder and the data stays put.

Avonni Area Chart on a Lightning page: closed won revenue by close month, January to October
Area

A trend over time, the area under it filled

Avonni Bar Chart: open pipeline amount by region
Bar

Categories compared as horizontal bars

Avonni Calendar Heatmap Chart: revenue closed on each day of 2026
Calendar heatmap

Every day of the year, shaded by its value

Avonni Choropleth Map Chart: accounts annual revenue shaded by country on a world map
Choropleth mapNew

Countries shaded by a measure

Avonni Column Chart: open pipeline amount by stage
Column

Categories compared as vertical bars

Avonni Combo Chart: revenue in bars and deal count as a line, by close month
Combo

Bars and a line on one chart, each on its own axis

Avonni Donut Chart: revenue mix by product line, $3.3M total
Donut

Each group's share of the total

Avonni Flat Gauge Chart: open pipeline against a $3M coverage target
Flat gauge

One value on a horizontal scale

Avonni Funnel Chart: pipeline amount by stage
Funnel

Stages narrowing from first to last

Avonni Gauge Chart: closed won at $3.3M, 82.3% of a $4M annual target
Gauge

One value on a dial, against its target

Avonni Heatmap Chart: revenue by region and product line
Heatmap

A grid of two groupings, colored by value

Avonni Line Chart: average deal size by close month
Line

Change over time, one line per group

Avonni Matrix Chart: deal size bubbles by region and product line
Matrix

Bubbles on two groupings, sized and colored by measures

Avonni Metrics Radar Chart: average, median, largest and smallest deal by region
Metrics radar

Groups compared on several measures at once

Avonni Pyramid Chart: full pipeline on the left, weighted pipeline on the right, by stage
Pyramid

Two measures side by side, meeting in the middle

Avonni Stacked Bar Chart: open pipeline by region, split by stage
Stacked bar

Horizontal bars split into segments

Avonni Stacked Column Chart: closed won by quarter, split by product line
Stacked column

Vertical bars split into segments

Avonni Stacked Pyramid Chart: full and weighted pipeline by stage, split by region
Stacked pyramid

A pyramid whose bars are split into segments

Avonni Treemap Chart: revenue by region, then product line
Treemap

Nested rectangles sized by value

Avonni Word Cloud Chart: account industries sized by annual revenue
Word cloudNew

Words sized by a measure

Where it runs

One chart. Three places to put it.

The same types, groupings and measures follow you across Salesforce. What changes is where it lives and how you add it.

Lightning pages

On a record or app page

Build it in the Component Builder: pick the object, the field that groups, the field that measures and the type. Drop it anywhere the App Builder accepts a component.

Dynamic Components
Screen Flows

Inside a guided process

Show the numbers on the screen where someone decides, and redraw them when a value on the same screen changes.

Flow Screen Components
Experience Cloud

On a portal or site

Build the chart inside a Dynamic Component, then drop it on any page in Experience Builder. Partners and customers read live numbers on your portal.

Experience Cloud Components
In a real org

Chart, configured for one job.

Avonni Chart on a Lightning tab: twelve stacked columns of closed won bookings by month and region, with a tooltip showing May, North America and $63,500
center
Lightning Pages

Bookings stacked by region

Twelve months of closed won bookings, every column stacked by region, drawn live from the opportunities on one tab of the Sales app. Same data as the revenue pivot, so the two always agree.

See the configuration
All use cases
Live in the Playground

Every chart type, live.

Open a chart type, change any property and watch it redraw. Each one runs in a real Salesforce site.

Try the Chart live →
Avonni Gauge Chart in the Component Playground: quota attainment for the current fiscal quarter, needle at 72 on a 0 to 100 dial
Gauge
Open it live →
Avonni Donut Chart in the Component Playground: cases by priority for the current fiscal quarter, four slices from critical to low
Donut
Open it live →
Avonni Stacked Column Chart in the Component Playground: revenue by quarter for fiscal year 2026, each column stacked by product
Stacked column
Open it live →

A chart belongs where the decision is made

Salesforce reports and dashboards do this job well, in their own tab. This chart sits inside the page, the flow screen or the portal where people already work, and it reads the object directly, so there is no report to keep in sync.

Browse the component library
20
chart types, from columns to maps
9
ways to aggregate a field
3
places to put it: Lightning pages, Screen Flows and Experience sites
Questions

Before you install it

Do I need a report or a dashboard first?
No. The chart runs its own grouped query on the object: you pick the field that groups, the field that measures and how it adds up. Nothing to build in the report tab.
Which chart types are there?
Twenty: area, bar, column, line, combo, donut, funnel, gauge, flat gauge, heatmap, calendar heatmap, choropleth map, matrix, metrics radar, pyramid, treemap, word cloud, and stacked bar, column and pyramid.
Can I add a chart to a Screen Flow?
Yes. Drag it onto a screen in Flow Builder and point it at an object or a collection variable. It can redraw when a value on the same screen changes.
Can a gauge show progress against a target?
Yes. Set the minimum and maximum as fixed numbers or read them from a query, such as the quarter's quota, and choose the sweep angle and what the dial shows.
Can I use my brand colors?
Yes. Pick one of 15 palettes or enter your own hex colors. They apply in order, and a gauge uses the first one.
Does it work in Experience Cloud?
Yes, inside a Dynamic Component. Build the chart in a Dynamic Component, then add it to a page in Experience Builder. Site users need read access to the object the chart queries, or the chart stays empty.

Other components

See where another component runs, and how it is configured.

Data TableKanbanCalendarTimelineMapListChatPivot TableTree GridBrowse all components

Stop exporting to a spreadsheet to draw a chart

Install the package, point a chart at one object and put it on the screen where the number gets discussed.

Start freeTalk to sales