> ## Documentation Index > Fetch the complete documentation index at: https://cubed3-claude-gallant-ramanujan-39o0of.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # KPI > Highlight key metrics with composable blocks — numbers, comparisons, progress bars, sparklines, text, and HTML. KPI tiles highlight important metrics and key performance indicators. Rather than a single fixed layout, KPIs are **row-based and composable** — you build the tile by stacking blocks of different types, each configured independently. ## Getting started The KPI visualization starts with a **Number** block that compares the first and second rows of your result for the first numeric column. To add a new block, click the **+** button inside the visualization and choose the block type. To edit a block, click it in the visualization — the configuration panel updates to show that block's settings, split into a **Data** tab and a **Style** tab. Reorder blocks by dragging the handle on the left side of each block. Delete a block with the trash icon in its configuration panel. ## Block types ### Number Displays a single value from your query result. | Setting | Description | | ---------- | --------------------------------------------------- | | **Field** | The measure or dimension to display | | **Row** | Which row of the result to read from | | **Label** | Optional custom title; defaults to the field's name | | **Format** | Number formatting (currency, percent, etc.) | ### Comparison Displays a current value alongside a previous value with a calculated difference. Use this to show period-over-period change or target vs. actual. | Setting | Description | | ------------------------ | ------------------------------------------------------------------------------------------------ | | **Current field / row** | The primary value | | **Previous field / row** | The value to compare against — can be a different column or a different row from the same column | To compare to a static goal, add a column to your query that always returns the same number (e.g. a calculated field with a constant), then select it as the **Previous** field. Comparison blocks don't have their own format override — values and the calculated difference render using the query's own number formatting. Colors for the positive/negative/neutral states are set on the [Style tab](#per-block-styling). ### Progress bar Shows a value relative to a target as a progress bar or circle. Useful for goal tracking. | Setting | Description | | ---------------------- | ------------------------------------------------------------------ | | **Value field / row** | The current progress value | | **Use custom goal** | Switch the target from a query field to a fixed number you type in | | **Target field / row** | The goal or maximum value (hidden when a custom goal is set) | | **Label** | Optional custom title | | **Style** | Bar or circle | | **Width** | Width of the bar or circle, in pixels | | **Show percent** | Display the progress as a percentage of the target | | **Show target** | Display the target value alongside the progress indicator | | **Format** | Number formatting for the progress value | ### Sparkline Renders a compact trend line — with an optional filled area — within the KPI tile. Use this to show the trend behind the headline number. | Setting | Description | | -------------------- | --------------------------------------------------------------- | | **Series measure** | The measure to plot | | **Series dimension** | The dimension to use as the X axis (typically a time dimension) | | **Show value** | Display the headline value above the trend line | | **Show trend** | Show or hide the trend line/area itself | | **Line width** | Thickness of the trend line | | **Max points** | Limits the number of data points rendered | | **Height / Width** | Dimensions of the sparkline in the tile | | **Colors** | Line and area-fill colors | | **Format** | Number formatting for the headline value | By default, the headline value is the series measure's own latest value; toggle **Headline uses measure** off to source it from a different column instead. ### Text A Markdown-enabled text field for titles, headings, or descriptions within the tile. Supports standard Markdown formatting. Use text blocks for short labels and headings inside the KPI. For complex layouts with Markdown, use the [HTML block](#html) or consider the [Custom visualization](/docs/explore-analyze/charts/custom) instead. ### HTML A free-form HTML block rendered inside the KPI tile. Use this for advanced custom layouts that go beyond what the other block types support. ## Per-block styling Every block's Style tab has alignment controls for how its content sits within its own row: | Setting | Description | | -------------- | ---------------------- | | **Horizontal** | Left, center, or right | | **Vertical** | Top, middle, or bottom | Beyond alignment, the available color and font settings depend on the block type: | Block | Style options | | --------------------------------- | ---------------------------------------------------------------------------------------------------- | | **Number** | Value color, background color, and font size (in pixels) | | **Comparison** | Positive/negative colors for the change, plus a neutral color and background for the unchanged state | | **Progress bar, Sparkline, HTML** | Background color | ## Layout controls KPI tiles have a layout panel that controls how blocks are arranged: | Setting | Description | | ------------- | --------------------------------------------------------------- | | **Direction** | Row (blocks side-by-side) or Column (blocks stacked vertically) | | **Alignment** | How blocks align on the cross axis | | **Justify** | How blocks are distributed along the main axis | | **Gap** | Spacing between blocks | | **Wrap** | Whether blocks wrap to a new line when the tile is narrow | ## Converting to raw Markdown If you need customization beyond what the block builder supports, you can convert the KPI visualization directly to Markdown by clicking on the Markdown visualization option. Converting to Markdown is a one-way operation. If you do this accidentally, use the undo button to revert.