diff --git a/data-explorer/dashboard-conditional-formatting.md b/data-explorer/dashboard-conditional-formatting.md index c47925d5b7..151c22e047 100644 --- a/data-explorer/dashboard-conditional-formatting.md +++ b/data-explorer/dashboard-conditional-formatting.md @@ -3,7 +3,7 @@ title: Apply conditional formatting to Azure Data Explorer dashboard visuals description: Learn how to apply conditional formatting to Azure Data Explorer dashboard visuals. ms.reviewer: gabil ms.topic: how-to -ms.date: 08/26/2025 +ms.date: 08/19/2026 --- # Apply conditional formatting to Azure Data Explorer dashboard visuals @@ -15,7 +15,7 @@ For each visual, you have the flexibility to define one or more conditional form ## Prerequisites * Editor permissions on a [Azure Data Explorer dashboard](azure-data-explorer-dashboards.md) -* A table, stat, or multi stat dashboard visual +* A KPI, multi stat, stat, or table dashboard visual ## Add a conditional formatting rule @@ -94,6 +94,12 @@ To color your results by value: :::image type="content" source="media/dashboard-customize-visuals/value.png" alt-text="Screenshot of results for coloring by value."::: +## Conditional formatting a KPI visual + +In the **Visual setup** pane, you can apply conditional formatting to a KPI visual by selecting the **Conditional formatting** toggle. This option lets you define a rule that changes the color of the KPI within the predefined ranges. + +:::image type="content" source="media/dashboard-customize-visuals/kpi-conditional-formatting.png" alt-text="Screenshot of KPI visual conditional formatting." lightbox="media/dashboard-customize-visuals/kpi-conditional-formatting.png"::: + ## Related content * [Visualize data with Azure Data Explorer dashboards](azure-data-explorer-dashboards.md) diff --git a/data-explorer/dashboard-customize-visuals.md b/data-explorer/dashboard-customize-visuals.md index 0cba4ba2db..ae22863418 100644 --- a/data-explorer/dashboard-customize-visuals.md +++ b/data-explorer/dashboard-customize-visuals.md @@ -3,7 +3,7 @@ title: Customize Azure Data Explorer Dashboard Visuals description: Easily customize your Azure Data Explorer dashboard visuals ms.reviewer: mibar ms.topic: how-to -ms.date: 05/31/2026 +ms.date: 08/09/2026 --- # Customize Azure Data Explorer dashboard visuals @@ -32,7 +32,7 @@ To make changes to your dashboard: :::image type="content" source="media/dashboard-customize-visuals/edit-tile-button.png" alt-text="Screenshot of how to edit a tile in dashboards in Azure Data Explorer web UI."::: -1. Select **Apply changes** to save your changes and return to the dashboard. +1. In the upper toolbar, select **Apply changes** to save your changes and return to the dashboard. :::image type="content" source="media/dashboard-customize-visuals/save-changes.png" alt-text="Screenshot of how to save the changes to your dashboard tile in Azure Data Explorer web UI."::: @@ -128,6 +128,66 @@ To create and configure a Time series visual in your Azure Data Explorer dashboa :::image type="content" source="media/dashboard-customize-visuals/timeline.png" alt-text="Screenshot of the timeline controls in a Time series chart." lightbox="media/dashboard-customize-visuals/timeline.png"::: +## KPI visualization + +A KPI tile displays a single query-based numeric value as a visual indicator. It helps you quickly assess the health or status of a metric. Use KPI tiles for monitoring scenarios where you need to answer questions like: *"Is this value healthy or problematic?" "Is it above or below a baseline target?"* + +### Display modes + +KPI tiles support four display modes: + +| Mode | Description | Best for | +|------|-------------|----------| +| **Gauge** | A 180° arc with a needle pointing to the current value | Classic monitoring dashboards | +| **Bar** | A horizontal bar filled to reflect the current value | Compact horizontal layouts | +| **Donut** | A full 360° progress ring | Square tile layouts | +| **Number** | A large formatted number with threshold color | Dense dashboards | + +### Add a KPI tile + +1. In your dashboard, switch to **Editing** mode. +1. In the top menu bar, select **Add visual** and then select **KPI**. + +1. Configure the KPI settings: + - **Visual type**: Choose between **Bar**, **Donut**, **Gauge**, and **Number**. + - **Data**: Select the numeric field from your query to display. + - **Value format**: Choose **Auto**, decimals, thousands separator, or compact notation (for example, 1.2K). + - [**Conditional formatting**](#kpi-threshold-states): Set thresholds to define the healthy, warning, and critical ranges for your KPI. You can also choose whether higher or lower values are considered worse. + - **Reference line**: Optionally, add a baseline reference line to indicate a target or expected value. + +1. Select **Done** to add the tile to the dashboard. +1. Select the **Save** button to save the dashboard. + +> [!TIP] +> Use Copilot to create and configure KPI tiles from natural language. For example, try prompts like *"Show CPU usage as a gauge with thresholds at 70 and 90"* or *"Create a KPI for error rate with a baseline of 5%."* + +### KPI threshold states + +KPI tiles display one of three threshold states based on the current value and your threshold configuration: + +| State | Default color | Description | +|-------|---------------|-------------| +| Good | 🟢 Green | Value is in the healthy range. | +| Warning | 🟡 Yellow | Value is approaching a critical level. | +| Critical | 🔴 Red | Value is in the problematic range. | + +You can configure the threshold direction. Set **Higher is worse** for metrics like error rate or latency, or **Lower is worse** for metrics like throughput or availability. To ensure accessibility, threshold states also use pattern fills (stripes or dots) in addition to color, so they're distinguishable for color-blind users. + +### KPI change detection + +KPI tiles use event-driven updates rather than polling. When the data source receives new data, the KPI value updates automatically with a smooth 300 ms transition animation. If new data isn't received within 60 seconds (configurable in tile settings), a **Data stale** overlay displays with the timestamp of the last update. + +### Responsive sizing + +KPI tiles adapt their layout based on tile size: + +| Tile size | Rendered elements | +|-----------|-------------------| +| Small (2×2 to 3×3) | Value and threshold color only. | +| Medium (4×4 to 6×6) | Value, label, unit, threshold color, and baseline marker. | +| Large (7×7 and above) | Full rendering with threshold bands, tick marks, and scale labels. | + + ## Embed images You can embed images in your dashboard tiles by using Markdown text. diff --git a/data-explorer/includes/customize-visuals.md b/data-explorer/includes/customize-visuals.md index 8a1266cb97..d0aed2d880 100644 --- a/data-explorer/includes/customize-visuals.md +++ b/data-explorer/includes/customize-visuals.md @@ -10,13 +10,13 @@ The following table describes the available customization properties, categorize | Section | Property | Description | Visual types | |--|--|--|--| | **Colors** | **Color palette** | Determines the set of colors to use for the heatmap. | Heatmap | -| **Conditional formatting** | **Hide** or **Show** | A toggle option to turn off or turn on conditional formatting. For more information, see [Apply conditional formatting](../dashboard-conditional-formatting.md). | Anomaly chart, Area chart, Bar chart, Column chart, Multi Stat, Scatter chart, Table, Time chart | +| **Conditional formatting** | **Hide** or **Show** | A toggle option to turn off or turn on conditional formatting. For more information, see [Apply conditional formatting](../dashboard-conditional-formatting.md). | Anomaly chart, Area chart, Bar chart, Column chart, KPI, Multi Stat, Scatter chart, Table, Time chart | | **Data** | **Y columns** | The columns that provide data for the vertical axis. | Anomaly chart, Area chart, Bar chart, Column chart, Line chart, Scatter chart, Time chart | | | **X column** | The column that provides data for the horizontal axis. | Anomaly chart, Area chart, Bar chart, Column chart, Line chart, Scatter chart, Time chart | | | **Series columns** | The columns used to categorize data into different series. | Anomaly chart, Area chart, Bar chart, Column chart, Line chart, Scatter chart, Time chart | | | **Category column** | The column that determines the data categories. | Funnel chart, Heatmap, Pie chart | | | **Label column** | Assigns labels to each slot using the designated column. | Multi Stat | -| | **Value column** | The column that provides data for the visualization. | Funnel chart, Multi stat | +| | **Value column** | The column that provides data for the visualization. | Funnel chart, KPI, Multi stat | | | **Value** | The numeric column that serves as the primary variable for the heatmap. | Heatmap | | | **Numeric column** | The column that provides the numeric value for the data category. | Pie chart | | | **Define location by** | Determines the method used to define the location: **Infer**, **Latitude and longitude**, or **Geo point**. | Map | @@ -36,6 +36,6 @@ The following table describes the available customization properties, categorize | | **Vertical line value** | Specifies a value on the horizontal axis for vertical reference lines. | Anomaly chart, Area chart, Bar chart, Column chart, Multi Stat, Scatter chart, Time chart | | | **X axis scale** | Adjusts the scale of the horizontal axis to **linear** or **logarithmic**. | Anomaly chart, Area chart, Bar chart, Multi Stat, Scatter chart, Table, Time chart | | **Y Axis** | **Label** | Sets a custom label for the vertical axis. | Anomaly chart, Area chart, Bar chart, Column chart, Multi Stat, Scatter chart, Time chart | -| | **Maximum value** | Defines the maximum value on the vertical axis. | Anomaly chart, Area chart, Bar chart, Column chart, Multi Stat, Scatter chart, Time chart | -| | **Minimum value** | Defines the minimum value on the vertical axis. | Anomaly chart, Area chart, Bar chart, Column chart, Multi Stat, Scatter chart, Time chart | -| | **Reference lines** | Marks a value on the chart as a reference line for visual guidance. | Anomaly chart, Area chart, Bar chart, Column chart, Multi Stat, Scatter chart, Time chart | +| | **Maximum value** | Defines the maximum value on the vertical axis. | Anomaly chart, Area chart, Bar chart, Column chart, KPI, Multi Stat, Scatter chart, Time chart | +| | **Minimum value** | Defines the minimum value on the vertical axis. | Anomaly chart, Area chart, Bar chart, Column chart, KPI, Multi Stat, Scatter chart, Time chart | +| | **Reference lines** | Marks a value on the chart as a reference line for visual guidance. | Anomaly chart, Area chart, Bar chart, Column chart, KPI, Multi Stat, Scatter chart, Time chart | diff --git a/data-explorer/media/dashboard-customize-visuals/edit-tile-button.png b/data-explorer/media/dashboard-customize-visuals/edit-tile-button.png index 1960f1f3a6..23119694a0 100644 Binary files a/data-explorer/media/dashboard-customize-visuals/edit-tile-button.png and b/data-explorer/media/dashboard-customize-visuals/edit-tile-button.png differ diff --git a/data-explorer/media/dashboard-customize-visuals/kpi-conditional-formatting.png b/data-explorer/media/dashboard-customize-visuals/kpi-conditional-formatting.png new file mode 100644 index 0000000000..2bbf599e4c Binary files /dev/null and b/data-explorer/media/dashboard-customize-visuals/kpi-conditional-formatting.png differ diff --git a/data-explorer/media/dashboard-customize-visuals/save-changes.png b/data-explorer/media/dashboard-customize-visuals/save-changes.png index 4d213d6a1e..27c2aced0e 100644 Binary files a/data-explorer/media/dashboard-customize-visuals/save-changes.png and b/data-explorer/media/dashboard-customize-visuals/save-changes.png differ diff --git a/data-explorer/media/dashboard-parameters/edit-dashboard.png b/data-explorer/media/dashboard-parameters/edit-dashboard.png index 7b10d4944b..02f4d36056 100644 Binary files a/data-explorer/media/dashboard-parameters/edit-dashboard.png and b/data-explorer/media/dashboard-parameters/edit-dashboard.png differ