Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,13 @@ author: Natalia Kazakova
legacyId: 17943
---
# Coloring

The Dashboard Designer allows you to paint dashboard item elements such as chart series points or pie segments.

![Coloring_GlobalColors](../../images/coloring_globalcolors25370.png)
![WinForms Dashboard - Coloring - Global Color Scheme](../../images/coloring_globalcolors25370.png)

## Supported Dashboard Items

You can paint the following [dashboard items](../dashboard-item-settings.md):

* Chart
Expand All @@ -21,20 +23,17 @@ You can paint the following [dashboard items](../dashboard-item-settings.md):
## Color Scheme Overview
The dashboard supports two ways to color dashboard item elements:

* A **Global Color Scheme** uses consistent colors for identical values across the dashboard. The image below shows a dashboard that contains Pie and Chart dashboard items. Pie segments and chart series points that correspond to _Wisconsin_, _Oregon_ and _Idaho_ dimension values use identical colors from the default palette.
* A **Global Color Scheme** uses consistent colors and styles for identical values across the dashboard. The image below shows a dashboard that contains Pie and Chart dashboard items. Pie segments and chart series points that correspond to _Wisconsin_, _Oregon_ and _Idaho_ dimension values use identical colors from the default palette.

![wdd-coloring-global-scheme](../../images/wdd-coloring-global-scheme126076.png)
![WinForms Dashboard - Coloring - Global Color Scheme](../../images/wdd-coloring-global-scheme126076.png)

For a global color scheme, the dashboard reserves automatically generated colors for specific values regardless of the filter state.
* A **Local Color Scheme** uses an independent set of colors for each dashboard item. The image below shows Pie segments that use colors from a local color scheme. These colors do not affect the Chart items that use a global scheme.
* A **Local Color Scheme** uses an independent set of colors and styles for each dashboard item. The image below shows Pie segments that use colors from a local color scheme. These colors do not affect the Chart items that use a global scheme.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
* A **Local Color Scheme** uses an independent set of colors and styles for each dashboard item. The image below shows Pie segments that use colors from a local color scheme. These colors do not affect the Chart items that use a global scheme.
* A **Local Color Scheme** uses an independent set of colors and styles for each dashboard item. The image below shows Pie segments that use colors from a local color scheme. These colors do not affect Chart items that use a global scheme.


![common-coloring-local-scheme](../../images/common-coloring-local-scheme.png)
![WinForms Dashboard - Coloring - Local Color Scheme](../../images/common-coloring-local-scheme.png)

For a **Local** color scheme, the dashboard reassigns palette colors when the filter state is changed.

>[!TIP]
>**Local** colorization paints dashboard item elements more quickly because the control does not request all possible colors and requests only colors used in the current item.

## Color Measures and Dimensions
You can use predefined color modes to paint individual dimensions or all measures in a dashboard item.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,27 +11,66 @@ The Dashboard Designer associates dimension values/measures and specified colors

The following concepts are common to both Desktop and Web Dashboard controls:

* Dashboard palettes
* Color Modes
* Color Schemes
* Supported Dashboard Items

Refer to the following topic for more information about common concepts: [Coloring Basics](../coloring.md).

## Predefined Dashboard Palettes
Comment thread
pollyndos marked this conversation as resolved.

The following palettes are available:

| Palette | Description |
| --- | --- |
| **Default** | The default palette used to color dashboard item elements. |
| **Bright** | Bright color accents. Optimized for users with deuteranopia and protanopia. |
| **High Contrast** | High visual contrast. Suitable for grayscale rendering, monochrome vision, and users with deuteranopia, protanopia, and tritanopia. |
| **Warm Gradient** | A Yellow-Orange-Brown palette. Optimized for grayscale rendering and users with deuteranopia, protanopia, and tritanopia. |
| **Sunset** | Warm sunset tones intended for values between two extremes. Optimized for users with deuteranopia and protanopia. |
| **Vibrant** | Vivid color contrast. Optimized for users with deuteranopia and protanopia. |

You can change a dashboard palette in the Color Scheme dialog in the WinForms Dashboard Designer:

![Change dashboard palette in WinForms Designer](../../../images/change-dashboard-palette-win.png)

The selected palette applies to the entire dashboard and uses consistent colors and styles for identical values across dashboard items.

### Hatch and Line Styles

For each color, you can also specify hatch and line styles to distinguish data series without relying on color:

* **Line Styles**

Use line styles for Chart and Range Filter dashboard items with line series.

![WinForms Dashboard - Line styles applied to series](../../../images/win-dashboard-line-styles.png)

* **Fill Styles**

Use a solid or hatch fill style for Chart dashboard items with bar and bubble series, Range Filter dashboard items with bar series, Pie, Scatter Chart, and Pie Map dashboard items.

![WinForms Dashboard - Fill styles applied to series](../../../images/win-dashboard-hatch-styles.png)

> [!NOTE]
> Hatch and line styles apply only to the dashboard items and series types listed above.

## Color Mode: None

You can disable default color variation for dashboard item elements.

If you add a [TreeMap](../../dashboard-item-settings/treemap.md) to a dashboard, individual elements (titles) use different colors:

![win-coloring-treemap-default](../../../images/win-coloring-treemap-default.png)
![WinForms Dashboard - TreeMap Coloring - Default Mode](../../../images/win-coloring-treemap-default.png)

_State_ values (Arguments) use different colors. To disable color variation, go to the Argument settings and select **Color by | None**.

![win-coloring-treemap-none](../../../images/win-coloring-treemap-none.png)
![WinForms Dashboard - TreeMap Coloring - None Mode](../../../images/win-coloring-treemap-none.png)

Add a [Chart](../../dashboard-item-settings/chart.md) with the same Argument and Value as in the TreeMap:

![win-coloring-treemap-chart-none](../../../images/win-coloring-treemap-chart-none.png)
![WinForms Dashboard - TreeMap Coloring - Chart None Mode](../../../images/win-coloring-treemap-chart-none.png)

Note that **Default** means **None** for chart arguments.

Expand All @@ -41,47 +80,44 @@ You can enable colors in previously added Treemap and Chart items.

Set the TreeMap's color mode to **Default** or **Hue**:

![win-coloring-chart-none-treemap-hue](../../../images/win-coloring-chart-none-treemap-hue.png)
![WinForms Dashboard - TreeMap Coloring - Hue Mode](../../../images/win-coloring-chart-none-treemap-hue.png)


In the Chart settings, move _State_ from Arguments to Series. **Default** now means **Hue** in this new context. The coloring indicator (![ColoringIndicator](../../../images/coloringindicator25453.png)) on the data item shows that color variation by hue is enabled.
In the Chart settings, move _State_ from Arguments to Series. **Default** now means **Hue** in this new context. The coloring indicator (![WinForms Dashboard - Coloring Indicator](../../../images/coloringindicator25453.png)) on the data item shows that color variation by hue is enabled.

![win-coloring-chart-treemap-hue](../../../images/win-coloring-chart-treemap-hue.png)
![WinForms Dashboard - Chart Coloring - Hue Mode](../../../images/win-coloring-chart-treemap-hue.png)

Add _Category_ as a chart argument and switch to 100% Stacked View:

![win-coloring-full-stacked-chart](../../../images/win-coloring-full-stacked-chart.png)
![WinForms Dashboard - Full Stacked Chart](../../../images/win-coloring-full-stacked-chart.png)

## Use Global Color Scheme

The same _State_ data items use identical colors. Dashboard constructs a **Global Color Scheme** for this purpose.
The same _State_ data items use identical colors and styles. The dashboard constructs a **Global Color Scheme** for this purpose.

Add a [Range Filter](../../dashboard-item-settings/range-filter.md) with the following settings:

![win-coloring-range-filter](../../../images/win-coloring-range-filter.png)
![WinForms Dashboard - Range Filter Coloring](../../../images/win-coloring-range-filter.png)

Corresponding _State_ fields are painted with the same colors, so you can associate and compare data from all dashboard items. This happens because all items use **Global Colors** (the default setting). You can see the switch to **Global Colors** in the Ribbon. Click **Edit Colors** to modify the colors used in the palette:
Identical colors and styles correspond to the same _State_ values, so you can associate and compare data across all dashboard items. All items use **Global Colors** by default (you can toggle this in the Ribbon). Click **Edit Colors** to modify the colors and styles used in the palette:

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Identical colors and styles correspond to the same _State_ values, so you can associate and compare data across all dashboard items. All items use **Global Colors** by default (you can toggle this in the Ribbon). Click **Edit Colors** to modify the colors and styles used in the palette:
Identical colors and styles correspond to the same _State_ values, so you can associate and compare data across all dashboard items. All items use **Global Colors** by default (you can toggle this in the Ribbon). Click **Edit Colors** to modify colors and styles used in the palette:


![win-coloring-custom-color](../../../images/win-coloring-custom-color.png)

> [!NOTE]
> The dashboard uses the default palette. This palette contains 20 unique colors to paint dimension values/measures. For more information on how to change default colors or create a new color table, refer to the following help topic: [Customizing a Color Scheme](customizing-a-color-scheme.md).
![WinForms Dashboard - Custom Color](../../../images/win-coloring-custom-color.png)

This is how the Dashboard appears after you change the color for *Georgia* in the palette:
This is how the Dashboard appears after you change the color or style for *Georgia* in the palette:

![win-dashboard-with-global-color-scheme](../../../images/win-dashboard-with-global-color-scheme.png)
![WinForms Dashboard - Dashboard with Global Color Scheme](../../../images/win-dashboard-with-global-color-scheme.png)

## Use Local Color Scheme

If you want to use an independent set of colors in the selected dashboard item, switch to the **Local Color Scheme**.
If you want to use an independent set of colors and styles in the selected dashboard item, switch to the **Local Color Scheme**.

You can see the Treemap's arguments that use colors from the **Local Color Scheme**:

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
You can see the Treemap's arguments that use colors from the **Local Color Scheme**:
You can see Treemap arguments that use colors from the **Local Color Scheme**:


![win-coloring-treemap-local-color-scheme](../../../images/win-coloring-treemap-local-color-scheme.png)
![WinForms Dashboard - Treemap Local Color Scheme](../../../images/win-coloring-treemap-local-color-scheme.png)

Colors modified in the local color scheme do not affect items that use the global color scheme. The following image shows a custom color for _Georgia_ in the Treemap:

![win-coloring-treemap-local-color-scheme-custom-color](../../../images/win-coloring-treemap-local-color-scheme-custom-color.png)
![WinForms Dashboard - Treemap Local Color Scheme Custom Color](../../../images/win-coloring-treemap-local-color-scheme-custom-color.png)

## Dashboard Item Color Mode Specifics

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,67 +4,78 @@ author: Natalia Kazakova
legacyId: 17945
---
# Customizing a Color Scheme
The Dashboard Designer provides the capability to edit colors contained in [global and local color schemes](coloring-concepts.md). You can select the required color from the default dashboard palette or specify a custom color.

The Dashboard Designer allows you to edit colors and styles in [global and local color schemes](coloring-concepts.md). You can select a color or style from a dashboard palette or specify a custom color or style.
* [Invoke a Color Scheme Dialog](#invoke-a-color-scheme-dialog)
* [Edit Colors](#edit-colors)
* [Add a New Value](#add-a-new-value)
* [Add a New Color Table](#add-a-new-color-table)

## <a name="invoke-a-color-scheme-dialog"/>Invoke a Color Scheme Dialog
To edit colors, use the **Color Scheme** dialog. You can invoke this dialog in the following ways.
* To edit colors in a global color scheme, use the **Edit Colors** button in the **Home** ribbon tab or the **Edit Colors** button in the dashboard item's **Design** tab.
## Invoke a Color Scheme Dialog
To edit colors and styles, use the **Color Scheme** dialog. You can open this dialog in the following ways:

* To edit colors and styles in a global color scheme, use the **Edit Colors** button in the **Home** ribbon tab or the **Edit Colors** button in the dashboard item's **Design** tab.

![Dashboard_EditColors_Ribbon](../../../images/img25387.png)![DashboardItem_EditColors_Ribbon](../../../images/img25388.png)
* To edit colors in a local color scheme, use the **Edit Colors** button in the contextual **Design** ribbon tab.
![WinForms Dashboard - Edit Colors in Home Ribbon](../../../images/img25387.png) ![WinForms Dashboard - Edit Colors in Design Tab](../../../images/img25388.png)
* To edit colors and styles in a local color scheme, use the **Edit Colors** button in the contextual **Design** ribbon tab.

![DashboardItem_EditLocalColors_Ribbon](../../../images/img25449.png)
![WinForms Dashboard - Edit Local Colors in Design Ribbon](../../../images/img25449.png)

Lets consider a Chart dashboard item whose dimensions and measures are colored by hue using local colors.
Consider a Chart dashboard item where dimensions and measures are colored by hue with local colors.

![Chart_ColorByHueAll](../../../images/img25392.png)
![WinForms Dashboard - Chart Colored by Hue with Local Colors](../../../images/img25392.png)

For this dashboard item, the **Color Scheme** dialog will contain combinations of all dimension values and a specific measure.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what do you mean by "and a specific measure"?


![LocalColorSchemeDialog](../../../images/img25394.png)
![WinForms Dashboard - Local Color Scheme Dialog](../../../images/img25394.png)

In this dialog, you can perform the following actions.
* [Edit automatically assigned colors](#edit-colors) or specify new colors.
* [Edit automatically assigned colors and styles](#edit-colors) or specify new colors and styles.
* [Add new values](#add-a-new-value) to a color table.
* [Add new color tables](#add-a-new-color-table) containing values whose colors are not yet assigned.
* [Add new color tables](#add-a-new-color-table) that contain values whose colors and styles are not yet assigned.

## <a name="edit-colors"/>Edit Colors
You can customize automatically assigned colors in several ways.
## Edit Colors
You can customize automatically assigned colors and styles in several ways.
* To retain the automatically assigned color for the selected value, right-click the required value in the **Value** column and select **Retain this color**.

![RetainThisColor](../../../images/img25395.png)
![WinForms Dashboard - Retain This Color](../../../images/img25395.png)

This reserves the current palette color for the selected value.
* You can select another palette color by clicking the required cell in the **Color** column.
* You can click the required cell in the **Color** column to select another palette color.

![SelectPaletteColor](../../../images/img25396.png)
* To specify a custom color, click **More Colors...** and pick any color using the RGB or HSB color model in the invoked **Select Color** dialog.
![WinForms Dashboard - Select Palette Color](../../../images/img25396.png)
* To specify a custom color, click **More Colors...** and use the RGB or HSB color model in the invoked **Select Color** dialog to choose any color.

![WinForms Dashboard - Select Custom Color](../../../images/img25397.jpeg)

* To specify a fill style, click the required cell in the **Fill Style** column and select the required hatch style from the drop-down list.

![SelectColorDialog](../../../images/img25397.jpeg)
![WinForms Dashboard - Selecting a hatch style in the Fill Style column](../../../images/win-dashboard-fill-style.png)

You can reset the customized color for the selected value using the **Reset** menu item.
* To specify a line style, click the cell in the **Line Style** column and select the line style from the drop-down list.

![WinForms Dashboard - Selecting a line style in the Line Style column](../../../images/win-dashboard-line-style.png)

Use the **Reset**/**Reset all** menu items to reset the customized colors.

![ResetColor](../../../images/img25407.png)

## <a name="add-a-new-value"/>Add a New Value
The **Color Scheme** dialog allows you adding a new value with the specified color to the selected color table. To do this, click the **New Value...** button.
## Add a New Value
The **Color Scheme** dialog allows you to add a new value with the specified color to the selected color table. To do this, click the **New Value...** button.

![NewValueDialog](../../../images/img25403.png)
![WinForms Dashboard - New Value Dialog](../../../images/img25403.png)

In the invoked **New Value** dialog, specify the dimension values, add the required measures and click **OK**. This creates a new value whose color can be specified as described in [Edit Colors](#edit-colors).

You can remove manually added values using the **Remove** context menu item.

![RemoveColor](../../../images/img25405.png)
![WinForms Dashboard - Remove Color](../../../images/img25405.png)

## Add a New Color Table

## <a name="add-a-new-color-table"/>Add a New Color Table
The **Color Scheme** dialog also allows you to add a new color table containing values whose colors are not yet assigned. To do this, click **New Color Table...** button.
The **Color Scheme** dialog also allows you to add a new color table containing values whose colors are not yet assigned. To do this, click the **New Color Table...** button.

![NewColorTableDialog](../../../images/img25408.png)
![WinForms Dashboard - New Color Table Dialog](../../../images/img25408.png)

In the invoked dialog, specify the data source, add the required dimensions and enable the **'MeasureNames' Dimension** check-box if you need to add measures to a color table.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,26 @@ legacyId: 16875
---
# Coloring

The Chart dashboard item paints different measures and series dimensions by [hue](../../appearance-customization/coloring/coloring-concepts.md) in **Default** color mode. The image below shows the chart item whose _State_ series dimension values are painted in different colors. A special icon (![ColoringIndicator](../../../images/coloringindicator25453.png)) on the data item shows that color variation is enabled.
The Chart dashboard item paints different measures and series dimensions by [hue](../../appearance-customization/coloring/coloring-concepts.md) in **Default** color mode. The image below shows the chart item where _State_ series dimension values are painted in different colors. A special icon (![WinForms Dashboard - Coloring Indicator](../../../images/coloringindicator25453.png)) on the data item shows that color variation is enabled.

![win-chart-colored-by-default](../../../images/win-chart-colored-by-default.png)
![WinForms Dashboard - Chart Colored by Default](../../../images/win-chart-colored-by-default.png)

For each color, you can also specify fill and line styles to distinguish data series without relying on color:

* **Line Styles**
Use line styles for Chart dashboard items with line series.

![WinForms Dashboard - Line styles](../../../images/win-dashboard-line-styles.png)

* **Fill Styles**
Use a solid or hatch fill style for Chart dashboard items with bar and bubble series.

![WinForms Dashboard - Fill styles applied to series](../../../images/win-dashboard-hatch-styles.png)

> [!NOTE]
> Note that the Chart dashboard item does not support coloring for the [financial](series/financial-series.md) series.
> The Chart dashboard item does not support color variation for the [financial](series/financial-series.md) series.

>[!Tip]
>**Documentation:**<br>
>* [Conditional Formatting](conditional-formatting.md)
>* [Coloring Basics](../../appearance-customization/coloring.md)
>* [Coloring Basics](../../appearance-customization/coloring.md)
Loading
Loading