Skip to content
KONIGI Patterns

Dashboards / Key measures / Ratio and rate

‹ 5 of 7 ›

Ratio and rate

People need to judge a count in relation to overall volume or time.

Updated September 9, 2026

Problem

A count can be hard to judge without knowing the total activity or time behind it.

Solution

Show the amount relative to a meaningful total or time interval. Label the denominator and measurement window beside the result.

Keep the underlying count available, especially when small samples can produce large percentages. Handle a zero or missing denominator explicitly rather than displaying a misleading value.

Explain any averaging or smoothing that affects the result. Make sure the calculation fits the kind of measurement being used.

Use when

Raw counts vary with overall volume and people need to compare the underlying proportion or pace.

Don’t use when

The count itself is the thing someone acts on. Open incidents, people on call, orders waiting to ship. Nobody dispatches against a percentage. Also don’t normalize when the denominator is small or unstable enough that the ratio swings more than the numerator does.

Trade-offs

Ratios hide scale, and averaged rates hide bursts within the period. Different denominators can make similar-looking values incomparable. Showing the count and window helps people judge the result.

Checklist

  • What is the denominator, and is it on the screen?
  • Over what window, and is it the same window as everything beside it?
  • How large does the denominator get at the quiet end of the day, and does the ratio stay meaningful there?
  • Is the raw count shown alongside, so the viewer can size the problem?
  • Is this a rate over a counter, and does the query handle resets?
  • Could this function be running against a gauge, where it would return nonsense silently?
  • Does the smoothing hide bursts the viewer would care about?
  • Percent, per-mille, or per-unit, and does the unit match how the team talks?
  • If this ratio feeds an SLO, is the SLO’s window the same as the panel’s?
  • What does the tile show when the denominator is zero?

Compare

Grafana treats normalization as a query concern and formatting as a panel concern, so a ratio’s correctness lives in PromQL the viewer never sees while the panel confidently formats whatever comes back as a percentage. Netdata leans on per-second rates as the default unit of everything, which makes bursts visible where a per-minute average would have flattened them. Honeycomb prefers to keep the raw events and derive the ratio at query time, so the denominator is something you chose in the query rather than something baked into a metric name months ago. Sentry normalizes by session and by release, which turns “how many errors” into “what fraction of sessions were bad”, the form product teams can actually argue about. Cloudflare Radar puts the denominator where nobody can miss it, printing both sides as text above the bar so “Bot 57.9%, Human 42.1%” reads without the chart at all. That suits an audience which will take one figure and leave, and it means the ratio cannot be misread by anyone who skips the encoding.

KPI tile often displays a rate. Percentile summary shows variation that an average can hide. Explain this metric defines the denominator and calculation.

Metric targets sets an agreed goal and measurement window.

Ratio and rate anatomy An error-rate tile broken into four numbered parts: label, the ratio itself, the denominator spelled out, and the window. Below, the same thirty-three percent computed over three requests and over two million. Anatomy Error rate 1 0.04% 2 842 of 2,104,338 requests 3 Last 5 minutes 4 1 LABEL Names the ratio, not the query. 2 THE RATIO Normalised by something the viewer already understands: a request, a customer, a gigabyte. 3 DENOMINATOR One line longer and the tile becomes answerable. Almost nobody prints it. 4 WINDOW The same figure over a minute and over a quarter describe different systems. Why the denominator has to be on the tile Both of these are thirty-three percent. 33% 1 of 3 requests 33% 694,431 of 2,104,338 requests
Wireframe — the pattern's anatomy, not any one product's version of it

Implementation

99.9% of ten requests is one failure. The denominator is what makes a rate readable, and it is the first thing dropped when a tile gets tight.

Tokens
--foreground--muted--muted-foreground--border--chart-1

Error rate

0.04%

842 of 2,104,338 requests

Last 5 minutes

Rate.tsxThe denominator is a required prop and a low-count rate is marked as unreliable.

/**
 * A rate without its denominator is not a measurement.
 *
 * 99.9% over ten requests and 99.9% over four million are different claims, and
 * only one of them survives a single bad minute. `of` is required, and below a
 * threshold the component says the number is thin rather than letting a viewer
 * read it as precision.
 */
export function Rate({
  numerator,
  of,
  label,
  unit,
  minReliable = 100,
}: {
  numerator: number;
  of: number;
  label: string;
  /** What is being counted: "requests", "sessions". */
  unit?: string;
  minReliable?: number;
}) {
  const pct = of === 0 ? null : (numerator / of) * 100;
  const thin = of < minReliable;

  return (
    <div>
      <p className="text-xs text-muted-foreground">{label}</p>
      <p className="mt-1 text-2xl font-semibold tabular-nums text-foreground">
        {/* Two decimals at both ends. 99.95% and 0.04% are the rates people
            act on, and one decimal rounds both to a lie. */}
        {pct === null ? "—" : `${pct.toFixed(pct > 99 || pct < 1 ? 2 : 1)}%`}
      </p>
      <p className="text-xs tabular-nums text-muted-foreground">
        {numerator.toLocaleString()} of {of.toLocaleString()}{unit ? ` ${unit}` : ""}
        {thin && <span className="ml-1 text-status-warn">· small sample</span>}
      </p>
    </div>
  );
}

demo.tsxHow it is called: numerator, denominator and what is counted.

import { Rate } from "./Rate";

/** A rate with its denominator in view. Drop `of` below 100 and it says so. */
export default function Demo() {
  return (
    <div className="w-[272px] rounded-lg border bg-card p-5">
      <Rate label="Error rate" numerator={842} of={2_104_338} unit="requests" />
      <p className="mt-4 text-xs text-muted-foreground">Last 5 minutes</p>
    </div>
  );
}
What it renders. Identical markup in both panes, with only the token values changing.

Copy-paste: this implementation as plain text

Examples

Screenshots are grouped by product and include the capture date. Dashed boxes highlight this pattern. Notes appear below each screenshot and when you hover over a box.

Cloudflare Radar

Public internet-traffic dashboards with location and time controls and links from summaries to detailed views.

Cloudflare Radar — Worldwide Overview
Multi-page dashboard. The rail links to eleven sections and expands the current one. Compare periods. The dotted line shows the previous seven days on the same axes. Delta indicator. Each browser share has a change value beneath it. Overview then detail. Each summary links to a fuller page through its heading arrow. Ratio and rate. Both parts of the split are named and shown as percentages. Stacked composition. Four mitigation categories fill a 100% bar, with their values printed above it. Ranked list. This top-ten list shows rank without values.
Worldwide Overview September 11, 2026 Public site, signed out; no version string exposed medium · light · desktop-web
Radar’s overview uses location and time controls to set the scope of the page. Each summary panel links to a fuller section, making the page a starting point for further reading. Values are printed above the charts, so people can read figures without estimating them from marks. The bot and human shares, for example, are both labeled beside their bar.
Show 6 more examples Hide the rest

Kraken Pro

A trading interface with price charts, an order book, and market-depth displays.

Kraken Pro — Trade / BTC-USD
Time series. Candles show opening, high, low, and closing values for each interval. Order book and depth. Buy and sell ladders show quantities with depth bars and a labeled spread. Red/green direction coloring. Asks are above the spread as well as colored red. Ratio and rate. The spread appears as both an amount and a percentage. Delta indicator. The price change includes an amount, percentage, and named period. Order book and depth. The price-increment control changes how levels are grouped.
Trade / BTC-USD September 11, 2026 Kraken Pro, signed out (public market data) dense · dark · desktop-web
The order book separates asks and bids by position as well as red and green. A labeled spread sits between them and includes both an absolute value and a percentage. Depth bars behind the rows help compare quantities that are difficult to scan as long decimal values. A price-increment control changes how orders are grouped into levels.

Tableau Public

Published workbooks show how individual authors arrange charts and interactions in Tableau.

Tableau Public — Cohort Retention Analysis
Cohort grid. Rows represent groups and columns represent elapsed periods. Ratio and rate. Group dates appear without starting population sizes. Sequential and diverging scales. The constant 100% first column sets the top of the color range. Cohort grid. Low final cells need an indication of whether the period is complete.
Cohort Retention Analysis September 11, 2026 Tableau Public embed view; workbook published by Tyran Christian medium · light · desktop-web
The grid follows monthly groups across periods since joining. Newer groups have fewer completed periods, creating the triangular shape. The first column is always 100%, taking the darkest color and leaving a narrower visual range for later values. Final cells also show sharp drops; the view needs to clarify whether those periods are complete before readers compare them. Group sizes are not shown.
Tableau Public — Energy flows in the Regional scenario
Sankey and path. Band widths show quantity across three sets of nodes. Categorical series palette. Consistent carrier colors help people follow bands across columns. Ratio and rate. Supply and demand totals let readers check the overall quantities. Dashboard builder. Layout controls expose technical settings alongside the data. Sankey and path. Conversion losses have an explicit destination.
Energy flows in the Regional scenario September 11, 2026 Tableau Public embed view; workbook published by Chia Yu Lin medium · light · desktop-web
The diagram follows energy from supply to demand using band widths for quantity. It includes conversion losses as a separate destination, so the difference between the stated supply and demand has an explanation. Carrier colors stay consistent across the columns, helping readers follow a flow. Layout controls are exposed beside the chart, including a highly precise spacing value that adds little to the data reading.
Tableau Public — User Funnel & Conversion Rates
Funnel. The tapered shape makes step quantities harder to compare than aligned bars. Header KPI strip. Summary counts appear without a comparison value. Funnel. Only overall conversion is labeled; step-to-step conversion requires calculation. Ratio and rate. Similar-looking rates are based on very different registration counts. Tabs as genres. Worksheet tabs use metric names that may need explanation.
User Funnel & Conversion Rates September 11, 2026 Tableau Public embed view; workbook published by Tetiana Berezhna medium · light · desktop-web
This published workbook shows overall conversion at each funnel step but omits conversion from the preceding step. Readers must calculate that themselves to compare losses between stages. The tapered rendering makes comparisons harder than aligned bars would. Another panel places rates based on very different registration counts at the same visual weight, showing why the denominator matters.
  • Funnel The tapered shape makes step quantities harder to compare than aligned bars.
  • Funnel Only overall conversion is labeled; step-to-step conversion requires calculation.
  • Ratio and rate Similar-looking rates are based on very different registration counts.
  • Header KPI strip Summary counts appear without a comparison value.
  • Tabs as genres Worksheet tabs use metric names that may need explanation.

Kibana

A query bar and filtering controls define the data shown in charts and document tables.

Kibana — Dashboards / [Flights] Global Flight Dashboard
Panel grid. Panels use different sizes within a grid. Ratio and rate. Delay percentages appear without their flight counts. Stacked composition. A 100% stack shows the mix of delay types without total volume. Annotation. Grouped event markers share the chart’s time axis. Header KPI strip. Different tile sizes and arrangements make the summary row less consistent. Compare periods. The comparison period is named, but the meaning of the percentage is unclear. Filter bar. Pickers and a range control provide alternatives to typing a query. Share and embed. Sharing and full-screen controls are available in the header.
Dashboards / [Flights] Global Flight Dashboard September 10, 2026 Elastic demo environment, sample flight data (guest session) dense · light · desktop-web
The delay table shows percentages without the number of flights behind each one. A high rate based on very few flights would look as prominent as one based on many. A nearby comparison tile names the previous week but does not clearly explain what its percentage represents. The filtering controls are more explicit: a query bar sits above pickers and a price range, giving people both typed and guided ways to narrow the view.
  • Ratio and rate Delay percentages appear without their flight counts.
  • Compare periods The comparison period is named, but the meaning of the percentage is unclear.
  • Share and embed Sharing and full-screen controls are available in the header.
  • Filter bar Pickers and a range control provide alternatives to typing a query.
  • Panel grid Panels use different sizes within a grid.
  • Stacked composition A 100% stack shows the mix of delay types without total volume.
  • Annotation Grouped event markers share the chart’s time axis.
  • Header KPI strip Different tile sizes and arrangements make the summary row less consistent.

Plausible Analytics

A metric row controls the main chart, followed by focused traffic breakdowns.

Plausible Analytics — Live demo / plausible.io
Single-column narrative. The page presents a summary followed by supporting breakdowns. Overview then detail. Breakdowns narrow the subject without leaving the page. Ranked list. The ranking shows counts and bars without a share-of-total column. Geo map with markers. Most countries have similarly pale fills, making differences hard to see. Header KPI strip. The selected metric tile controls the chart below. Ratio and rate. The rate’s context is spread across the tile row and page header. Tabs as genres. Tabs let one panel show several related breakdowns.
Live demo / plausible.io September 10, 2026 Plausible live demo, plausible.io's own stats (signed out) medium · light · desktop-web
The metric row controls the main chart: the selected tile is outlined and its series appears below. Supporting sections then break the results down by source, page, geography, and other categories. Ranked lists show counts and bars, but no visible share of the total. The map uses very pale colors for most countries, limiting how much variation is easy to see.

Machine-readable: this page as markdown