diff --git a/data-explorer/dashboard-customize-visuals.md b/data-explorer/dashboard-customize-visuals.md index 2b89d30c99..1903a7d1c9 100644 --- a/data-explorer/dashboard-customize-visuals.md +++ b/data-explorer/dashboard-customize-visuals.md @@ -1,16 +1,16 @@ --- -title: Customize Azure Data Explorer dashboard visuals +title: Customize Azure Data Explorer Dashboard Visuals description: Easily customize your Azure Data Explorer dashboard visuals ms.reviewer: gabil ms.topic: how-to -ms.date: 08/26/2025 +ms.date: 02/22/2026 --- # Customize Azure Data Explorer dashboard visuals Azure Data Explorer dashboards are a collection of tiles that feature a visual representation supported by an underlying Kusto Query Language (KQL) query. This article explains how to edit the visualizations and queries of a dashboard tile and provides an overview of customization properties specific to each visualization type. -All visualizations that are created in the context of the [render operator](/kusto/query/render-operator?view=azure-data-explorer&preserve-view=true#visualization) are available in dashboard visualizations, along with some [dashboard-specific visuals](dashboard-visuals.md). +All visualizations that you create in the context of the [render operator](/kusto/query/render-operator?view=azure-data-explorer&preserve-view=true#visualization) are available in dashboard visualizations. Along with these visualizations, you can use some [dashboard-specific visuals](dashboard-visuals.md). ## Prerequisites @@ -22,25 +22,55 @@ Review Visualize data with Azure Data Explorer dashboards. ## Customize visuals -To make changes in your dashboard: +To make changes to your dashboard: 1. In the top menu, select **Viewing** and toggle to **Editing** mode. :::image type="content" source="media/dashboard-parameters/edit-dashboard.png" alt-text="Screenshot of entering editing mode in dashboards in Azure Data Explorer web UI."::: -1. On the tile that you'd like to customize, select the **Edit** icon. Edit the underlying query or the visualization properties. +1. On the tile that you want to customize, select the **Edit** icon. Edit the underlying query or the visualization properties. :::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. To save your changes and return to the dashboard, select **Apply changes**. +1. 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."::: [!INCLUDE [customize-visuals](includes/customize-visuals.md)] +## Data series colors + +Data series colors give you direct control over how colors are applied to your visuals. Instead of relying on automatic color assignments, assign specific colors to each data series to convey meaning and maintain consistency across your dashboards. + +By using data series colors, you can: + +* Assign colors directly to each data series. + +* Override system defaults with intentional choices. + +* Maintain color consistency across visuals and dashboards. + +This feature is supported for the following visual types: Anomaly chart, Area chart, Bar chart, Column chart, Line chart, Pie chart, Scatter chart, and Time chart. + +To configure data series colors: + +1. In the top menu, select **Viewing** and toggle to **Editing** mode. + +1. On the tile you want to customize, select the **Edit** icon. + +1. In the **Visual** tab of the formatting pane, expand the **Data series colors** section. + +1. Select a color for each data series in your visual. + +1. Select **Apply changes** to save your settings. + +:::image type="content" source="media/dashboard-customize-visuals/data-color-series.png" alt-text="Screenshot of dashboard showing data series colors configuration in the visuals side pane." lightbox="media/dashboard-customize-visuals/data-color-series.png"::: + +When you assign colors intentionally, viewers can interpret visuals at a glance without needing to read legends or labels. Consider using colors that align with your organization's standards or that naturally convey the meaning of each series, such as red for critical states or green for healthy metrics. + ## Embed images -You can embed images in your dashboard tiles using Markdown text. +You can embed images in your dashboard tiles by using Markdown text. For more information on GitHub Flavored Markdown, see [GitHub Flavored Markdown Spec](https://github.github.com/gfm/). @@ -49,7 +79,7 @@ For more information on GitHub Flavored Markdown, see [GitHub Flavored Markdown :::image type="content" source="media/dashboard-customize-visuals/add-tile.png" alt-text="Screenshot of dashboard ribbon showing the dropdown menu of the Add button."::: -1. In the query pane, paste the URL of an image located in an image hosting service using the following syntax: +1. In the query pane, paste the URL of an image located in an image hosting service by using the following syntax: ```md ![](URL) diff --git a/data-explorer/includes/customize-visuals.md b/data-explorer/includes/customize-visuals.md index 1c8177788f..ef8749351a 100644 --- a/data-explorer/includes/customize-visuals.md +++ b/data-explorer/includes/customize-visuals.md @@ -1,6 +1,6 @@ --- ms.topic: include -ms.date: 12/14/2022 +ms.date: 01/18/2026 --- ## Set customization properties @@ -20,6 +20,7 @@ The following table describes the available customization properties, categorize | | **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 | +| **Data series colors** | **Color palette** | Customizes the colors presented in the visualization. | Anomaly chart, Area chart, Bar chart, Column chart, Line chart, Pie chart, Scatter chart, Time chart | | **Display options** | **Order by** | How to order the results in the chart: **Name**, **Size**, or **None**. | Pie chart | | | **Top N** | Option to only show sections for the top *n* values in the chart. | Pie chart | | **General** | **Display orientation** | Determines the orientation of the display: Horizontal or Vertical. | Multi Stat | diff --git a/data-explorer/media/dashboard-customize-visuals/data-color-series.png b/data-explorer/media/dashboard-customize-visuals/data-color-series.png new file mode 100644 index 0000000000..2be27b53b5 Binary files /dev/null and b/data-explorer/media/dashboard-customize-visuals/data-color-series.png differ