# 3.6. Data label customizations

You can determine the number of data labels to display in your charts and customize the appearance of the data labels from the settings side pane. You can also configure a percentage to display outlier values. Let's look at these options in detail.

{% hint style="info" %}
Data label settings can vary based on the chart type.&#x20;
{% endhint %}

The Value/Measure name toggle needs to be enabled to display data labels.

<figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FarFvTRQRvAXodaOUtSEQ%2Fimage.png?alt=media&#x26;token=4ac7a00d-9655-4853-9ed4-04cd5e4aca41" alt=""><figcaption><p>Data labels</p></figcaption></figure>

#### 1. Value display

You can define the number of data labels to render from options like All, None, Min+Max, First+Last, Nth label, etc. For Nth label, an additional Interval option is enabled. You can specify the interval between displaying labels. In the example, we've assigned an interval of 3, which means every 3rd bar will have a data label.

{% hint style="info" %}
Data labels will not be displayed if the data categories are too close to each other and the data label cannot fit in the available space.
{% endhint %}

<figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2F43PwKB5H5QPkwrKreKLG%2Fdata%20labels.gif?alt=media&#x26;token=5dc7a4c7-874d-4864-89b3-bbde7e423f00" alt=""><figcaption><p>Data label display options</p></figcaption></figure>

#### 2. Outliers

You can display the data points that deviate from the overall trend or average value by selecting the outlier option. Use the **Outlier percentage textbox** to define a threshold for an outlier based on percentage deviation i.e. if the difference between two consecutive data labels is more than the specified threshold, the point will be plotted as an outlier. You can also choose a color to highlight the outlier values - in this example, we have highlighted the outliers in red.

<figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FIvY2j0joS5Ai8MJhshOa%2Fimage.png?alt=media&#x26;token=84b401cb-9daa-44ed-9e7b-eab6778b2d5d" alt=""><figcaption><p>Outliers for charts</p></figcaption></figure>

#### 3. Options

* **Orientation**

When the data labels are rendered inside the bars, you can specify the orientation.

<div><figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FqNuxfCCtG5TrjCSLBY89%2Fimage.png?alt=media&#x26;token=6d767794-dbb7-466e-82bf-3ddab7f5fc0c" alt=""><figcaption><p>0 degrees orientation</p></figcaption></figure> <figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2F7Mm4OkegIZATFi5iCDTl%2F2024-07-10_17h07_43.png?alt=media&#x26;token=7a59dbb9-2e4a-4b79-9287-8e4e5bb240d0" alt=""><figcaption><p>-90 degrees orientation</p></figcaption></figure> <figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FIiVbuEyHg2fRfmGtIViS%2F2024-07-10_17h07_17.png?alt=media&#x26;token=cf9351ee-cff4-4dc7-9d49-5d6a7dd3be18" alt=""><figcaption><p>+90 degrees orientation</p></figcaption></figure></div>

* **Allow overlap**

Enable this option to display data labels even if they overlap each other.

<div><figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FnI6Mb1KBRJqUzvSJGjFK%2Fimage.png?alt=media&#x26;token=2c4eb67d-a03c-4a9d-ba4a-f63d0d7e7d4b" alt=""><figcaption><p>Allow overlap disabled</p></figcaption></figure> <figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FovTQyMpEFyiXQMEMFfNz%2F2024-11-15_15h55_58.png?alt=media&#x26;token=bfba9fea-e7c5-4fc0-882c-f52492ea0bea" alt=""><figcaption><p>Allow overlap enabled</p></figcaption></figure></div>

* **Allow overflow**

Enable this option to display data labels even if they exceed the allotted space.

<div><figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FVHRvRiv7k8U9KxdBtIpR%2Fimage.png?alt=media&#x26;token=c9b593a6-ca75-4656-90c0-e3c2e4408e7f" alt=""><figcaption><p>Data labels are displayed when Allow Overflow is enabled</p></figcaption></figure> <figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FuAkvcVgs77a9igr6VW4V%2F2024-11-15_16h07_53.png?alt=media&#x26;token=2c7e8b90-7801-43fa-8867-99ca0a6cb776" alt=""><figcaption><p>Data labels are hidden when Allow Overflow is disabled</p></figcaption></figure></div>

* **Match series color**

Enable the **Match series color** toggle for the data label colors to be coordinated with the series colors.

<figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FzAUG7jOnEcqG30XoEaVq%2Fimage.png?alt=media&#x26;token=987e7b54-c1f7-468d-91de-2bcdcf257e83" alt=""><figcaption><p>Match series color</p></figcaption></figure>

* **Bar overlap**

When the bar overlap option is enabled, data labels will dynamically be plotted inside the bars on canvas resize, thus giving maximum space on the canvas to plot the chart. In the combo chart, notice how some of the Sales data points are displayed inside the bar.

<figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FQgRtzrkXNX7hbYmsOIKZ%2Fimage.png?alt=media&#x26;token=8fe42681-8a81-4667-a94a-9c915fb3ad2c" alt=""><figcaption><p>Bar overlap</p></figcaption></figure>

#### 4. Label type

Select the measures for which to render data labels. You can display tooltip measures along with the data labels by selecting the measures from the dropdown.

<figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FTKneMGV1e720qOV1D4rb%2Fimage.png?alt=media&#x26;token=727bbb80-ad34-4daa-a177-1ac05b48c4fa" alt=""><figcaption><p>Label type</p></figcaption></figure>

* #### Position

You can set the position of the data labels with respect to the chart. You can choose from options like Outside, Inside - Top, Inside - Center, Inside - Bottom.&#x20;

{% hint style="info" %}
This option only applies to bar charts.
{% endhint %}

<figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FQF1j76iuyUt8shp0xYWy%2Fdata%20labels%20position.gif?alt=media&#x26;token=7b2c5df3-f96e-48aa-981f-6e2e718454f0" alt=""><figcaption><p>Data label position</p></figcaption></figure>

* #### Font

  You can set a custom font color, specify the size, and whether the font should be bold/italicized.

{% hint style="info" %}
Custom font colors are enabled only when the Contrast color option is disabled.
{% endhint %}

<figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FLcaGcE6kztqdpyVy7UyN%2Fimage.png?alt=media&#x26;token=0aaa8baf-8b7f-4088-9b5f-f04f41b58e70" alt=""><figcaption><p>Setting the data label font</p></figcaption></figure>

#### 5.  Contrast color

Enabling this property ensures that the data label color contrasts the chart color and the data labels are clearly visible. The label color is set to black when this property is disabled.

{% hint style="info" %}
The contrast color option can be enabled only when Display settings > Canvas > **Auto color** is turned off. When auto color is enabled, the font color is automatically set to contrast with the background.
{% endhint %}

<div><figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FlcDRWVsIM5bwY7qx6iPs%2Fimage.png?alt=media&#x26;token=90c4947a-63de-4224-a7b5-7dd24c2b1d92" alt=""><figcaption><p>Contrast color enabled</p></figcaption></figure> <figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FfQ35aXP0bEJcpOjkFMOy%2F2025-02-04_12h27_47.png?alt=media&#x26;token=ee260dcb-85df-47da-bf73-8cc2fb49cc50" alt=""><figcaption><p>Contrast color disabled</p></figcaption></figure></div>

#### 6. Vertical offset

You can configure the offset position of the data labels. Positive offsets will move the label downwards and negative offsets will move it upwards.

{% hint style="warning" %}
Offsets can be in the range of -100 to 100.
{% endhint %}

<div><figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FJZT2aPtY9UfItmerlRvR%2Fimage.png?alt=media&#x26;token=3dab02a2-4b17-47e3-8dac-2656c85cb7ad" alt=""><figcaption><p>Negative offset</p></figcaption></figure> <figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FZQBBSwsZxVHh05nIkZBv%2F2025-02-04_12h30_31.png?alt=media&#x26;token=9799f0fd-d345-45c1-97d7-8ddf321929a4" alt=""><figcaption><p>Positive offset</p></figcaption></figure></div>

#### 7. Horizontal offset

Similar to the vertical offset, you can also position the data labels horizontally (depending on the chart type).&#x20;

<figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FnIFjjjWndGUcGhJeYTEe%2Fimage.png?alt=media&#x26;token=e74ac965-3493-4275-81ee-fe5925ee9c68" alt=""><figcaption></figcaption></figure>

#### 8. Background

You can assign a background color for data labels. We have set the background color to grey in the example.

<figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FUFwXtfVFXwgejOByh01g%2Fimage.png?alt=media&#x26;token=d5bfb3ad-74fe-4fe3-b4f5-c9491d102cc0" alt=""><figcaption><p>Background color for data labels</p></figcaption></figure>

#### 9. Individual measure settings

You can tailor the data labels for each measure when you plot line charts. Notice how the data labels for each of the measures is rendered based on the individual configurations.

<figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FUrBYvueBY5ARYFhHJsUh%2Fimage.png?alt=media&#x26;token=e9ba0b70-4537-44e5-bc8d-bd37b6bb81bf" alt=""><figcaption><p>Individual measure configurations for data labels</p></figcaption></figure>

#### 10. Variance

When you have charts that depict a variance, enable the **Variance** toggle to see data labels for variances. The customization options for variance data labels are identical to regular data labels.

<figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FsYySmRTyuQjyiU9R5fQS%2Fimage.png?alt=media&#x26;token=aa565925-0424-4805-b8fb-faa5ae83be9e" alt=""><figcaption><p>Variance data labels</p></figcaption></figure>
