ChartQi

Chart examples

Chart types

16 chart types and 26 examples, all drawn from the same 360 dummy opportunity records (region, stage, product, channel, month, revenue, margin). Ask ChartQi for any of these by name in the conversation.

KPI cards

stat + kpi

A stat tile with a kpi block adds an icon, a trend delta and a comparison line. Compare against the previous period, growth since the period began, or a target. Examples use 2026-09-18 as today.

Total originated

$8.01M23.5%

vs. last quarter

Won revenue this quarter to date, compared with the same span of last quarter.

compare: previousPeriod · period: quarter · footer: comparison

Active loans

3208.1%

24 new this month

Open loans in the book, their growth since the start of the month, and how many were added this month.

compare: growth · period: month · footer: newInPeriod

Pipeline vs. target

$42.81M28.6%

vs. target $60.00M

Pipeline value measured against a fixed target.

compare: target

Average deal size

$129.27K54.6%

vs. last month

Average deal size this month against last month.

compare: previousPeriod · period: month

Lost deals

4028.6%

vs. last quarter

Lost deals this quarter. lowerIsBetter turns a rise red and a fall green.

compare: previousPeriod · period: quarter · lowerIsBetter

Total originated

$8.01M23.5%

vs. $2.04M last quarter

showCompareValue names last quarter's figure in the footer, so the delta has a reference point.

compare: previousPeriod · period: quarter · showCompareValue

Average deal size

$129.27K54.6%

vs. $117.65K last month

Average deal size with last month's average shown alongside the change.

compare: previousPeriod · period: month · showCompareValue

Active loans

3208.1%

from 296 at start of month

Growth of the open book, showing how many loans existed when the month began.

compare: growth · period: month · showCompareValue

Lost deals

4028.6%

vs. 7 last quarter

Lost deals with last quarter's count; lowerIsBetter keeps the colour meaningful.

compare: previousPeriod · period: quarter · lowerIsBetter · showCompareValue

Opportunities

360All stages

A classic stat without a kpi block: one centred value and a caption.

no kpi block

Captions and number format

kpi.caption · format

Open a tile's menu and choose Edit spec to write your own footer. Put placeholders in square brackets and ChartQi fills them in each time the tile loads. When kpi.caption is set, it replaces the generated footer. Leave it null to keep the default.

Placeholders

Caption placeholders
Placeholder	Fills in	Requires
[value]	The headline figure shown on the tile.	Always available
[currentPeriodValue]	The current period to date.	kpi.dateField
[previousPeriodValue]	The same elapsed span of the previous period (like-for-like).	kpi.dateField
[startValue]	The total as it stood when the current period began.	kpi.dateField
[target]	The tile's target.	target
[compareValue]	Whatever the delta is measured against: previous period, start value or target.	kpi.compare
[newInPeriod]	Records added this period, summed for sum tiles and counted otherwise.	kpi.dateField
[delta]	The change as a percentage, e.g. 12.4%.	A comparison
[deltaSigned]	The change with its sign, e.g. +12.4% or −3.0%.	A comparison
[period]	The period name: week, month, quarter or year.	Always (kpi tiles)

Rules

Placeholders are case-sensitive: [previousPeriodValue], not [PreviousPeriodValue].
Add :full or :compact to a number to override shortening for that figure only, e.g. [target:full] shows $60,000,000.00 instead of $60.00M.
Numbers use the tile's valueFormat and format block, so currency symbols, decimals, prefix and suffix carry over. [newInPeriod] on a count tile is a plain number.
A misspelled placeholder, or one whose requirement is missing, stays in the text as typed, so mistakes are easy to spot.
Classic stat tiles (no kpi block) use seriesLabel as the caption and only support [value].

The `format` block (every tile type)

Number format options
Field	Values	Effect
compact	"auto" \| "always" \| "never"	auto (default) shortens stat values and axes from 10,000 (19.45K, 55.91M). always shortens everywhere from 1,000. never shows full figures.
decimals	number	Fixed decimal places: 2 gives 19.45K, 0 gives 19K.
prefix	string	Text before every value, e.g. "~".
suffix	string	Text after every value, e.g. " deals" (include the space).

Omit a field, or set it to null, to keep the default. On charts, format applies to axes, tooltips and data labels.

Examples

Total originated

$8.01M23.5%

vs. $2.04M same span last quarter

Names last quarter's figure with your own wording instead of the generated footer.

{
  "kpi": {
    "caption": "vs. [previousPeriodValue] same span last [period]"
  }
}

Pipeline vs. target

$42.81M28.6%

−28.6% against a target of $60,000,000

A signed change plus the target in full, even though the headline is shortened.

{
  "kpi": {
    "caption": "[deltaSigned] against a target of [target:full]"
  }
}

Active loans

3208.1%

24 new this month, up from 296

Several figures in one line: what was added this month and the starting point.

{
  "kpi": {
    "caption": "[newInPeriod] new this [period], up from [startValue]"
  }
}

Average deal size

~$129K54.6%

Last month: ~$118K

A format block: no decimals, a '~' prefix, and always shortened. The caption inherits it.

{
  "format": {
    "compact": "always",
    "decimals": 0,
    "prefix": "~"
  },
  "kpi": {
    "caption": "Last [period]: [previousPeriodValue]"
  }
}

Opportunities

360 deals360 deals across all stages

Classic stat (no kpi block): the caption lives in seriesLabel and supports [value].

{
  "format": {
    "suffix": " deals"
  },
  "seriesLabel": "[value:full] across all stages"
}

Filters

filters[]

Dashboard filters sit above the tiles and narrow every tile on the targeted entity set. Try them here.

Tiles and dropdown

Region uses display: "tiles" (best for 2-6 short options). Product uses display: "dropdown" (best for many options). Both are multi-select and combine with AND across filters.

Region

Product

Filtered result

Opportunities360

Revenue$46.5M

Bar

bar

Compare a measure across categories. Supports stacked breakdowns and combo overlays.

Revenue by region

Sum of revenue grouped by region.

Click a segment to select it.

Pipeline by region and stage

seriesBy pivot: revenue per region stacked by pipeline stage.

Click a segment to select it.

Revenue and average deal size

Combo: revenue as bars with average deal size overlaid as a line.

Click a segment to select it.

Horizontal bar

horizontalBar

Ranked lists and long category labels read best horizontally.

Top 5 products by revenue

Top 5 products by revenue using the aggregation limit.

Click a segment to select it.

Opportunities by channel

Count of opportunities per channel, stacked by stage.

Click a segment to select it.

Line

line

Trends over an ordered axis such as time.

Monthly revenue

Monthly revenue in calendar order.

Click a segment to select it.

Total vs average revenue

Two measures on one axis: total and average revenue per month.

Click a segment to select it.

Area

area

Line trends with emphasis on volume. Series sharing a stackId stack.

Opportunities created per month

Monthly count of opportunities.

Click a segment to select it.

Deal value range per month

Stacked areas: max and min deal value per month.

Click a segment to select it.

Pie

pie

Share of a whole across a handful of categories.

Opportunities by stage

Opportunity count by stage.

Click a segment to select it.

Donut

donut

A pie with room for the total in the centre.

Revenue mix by product

Revenue share by product.

Click a segment to select it.

Revenue by channel

Revenue share by channel.

Click a segment to select it.

Scatter

scatter

Correlate two measures. A third measure sizes the bubbles.

Revenue vs margin by region

Each region placed by total revenue (x) and average margin (y), sized by deal count.

Click a segment to select it.

Avg probability by product

Single measure: average win probability per product.

Click a segment to select it.

Funnel

funnel

Progressive stages that narrow, like a sales pipeline.

Sales pipeline

Open and won opportunities by stage (Lost excluded).

Click a segment to select it.

Treemap

treemap

Nested rectangles sized by value. A seriesBy pivot adds a second level.

Revenue by product

Revenue by product.

Click a segment to select it.

Revenue by region and channel

Revenue by region, broken down by channel.

Click a segment to select it.

Sunburst

sunburst

Radial hierarchy: inner ring is the category, outer ring the pivot.

Product and region mix

Revenue by product (inner) and region (outer).

Click a segment to select it.

Heatmap

heatmap

Two categorical axes with colour encoding the value.

Opportunities by region and channel

Opportunity count for each region and channel.

Click a segment to select it.

Monthly revenue by product

Revenue by month and product.

Click a segment to select it.

Sankey

sankey

Flows from categories to their pivot values.

Channel to stage flow

Revenue flowing from each channel into pipeline stages.

Click a segment to select it.

Radar

radar

Profile several series across the same set of categories.

Product reach by channel

Opportunity count per product, one polygon per channel.

Click a segment to select it.

Gauge

gauge

A single total measured against a target.

Won revenue vs target

Won revenue against a $15M target.

Click a segment to select it.

Average win probability

Average win probability, auto-scaled.

Click a segment to select it.

Waterfall

waterfall

How each category contributes to a running total.

Won revenue build-up

Won revenue built up region by region.

Click a segment to select it.

Boxplot

boxplot

Distribution of a numeric measure within each category.

Deal size distribution

Deal size spread per product: min, quartiles, median and max.

Click a segment to select it.

Chart types

KPI cards

Captions and number format

Placeholders

Rules

The format block (every tile type)

Examples

Filters

Bar

Horizontal bar

Line

Area

Pie

Donut

Scatter

Funnel

Treemap

Sunburst

Heatmap

Sankey

Radar

Gauge

Waterfall

Boxplot

The `format` block (every tile type)