# Data label customization

#### Use Metric Formatting <a href="#use-metric-formatting" id="use-metric-formatting"></a>

When we activate data labels in any of the Vitara charts, the data labels are displayed in shortened format by default.

<figure><img src="https://106821559-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuIDde50GEkigLbPmGgLx%2Fuploads%2FMmr2wENwX9gBow7V7aSD%2Fimage.png?alt=media&#x26;token=b4cf80d0-3753-4abb-a6aa-48e5bf7edd4f" alt=""><figcaption></figcaption></figure>

To show the data labels in the same format as the metric’s data format, pick the Use Metric Formatting option from the data labels menu. The screenshot below was taken after enabling the Use Metric Formatting option.

<figure><img src="https://106821559-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuIDde50GEkigLbPmGgLx%2Fuploads%2F9z2511KcyzWXi1nTYE9v%2Fimage.png?alt=media&#x26;token=cab36089-40bd-4c3a-81ff-8c2d973d1997" alt=""><figcaption></figcaption></figure>

#### **If the metric’s data don’t have currency symbols, then how to display currency symbols in the data labels.**

Lets consider the data as shown in the below screenshot. Here the Metric Cost does not have dollar sign.

<figure><img src="https://106821559-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuIDde50GEkigLbPmGgLx%2Fuploads%2FfUSQhU3bzhKSredmLY5u%2Fimage.png?alt=media&#x26;token=d92dacdd-d427-44ed-8601-f66407032e57" alt=""><figcaption></figcaption></figure>

If we wish to display this data using vitara charts and include the dollar symbol in the data labels, we must first add the dollar sign to the data.Edit the metric’s number format in the TS and select the appropriate format.

<figure><img src="https://106821559-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuIDde50GEkigLbPmGgLx%2Fuploads%2F4MZ8oa4D1laui1Fa2YDo%2Fimage.png?alt=media&#x26;token=217b1de0-a579-493a-8b91-8400ddc57a50" alt=""><figcaption></figcaption></figure>

Now apply vitara chart, for example, vitara column chart.

<figure><img src="https://106821559-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuIDde50GEkigLbPmGgLx%2Fuploads%2Fz0Z7GNEuoOsgCC6jjGdR%2Fimage.png?alt=media&#x26;token=217f458b-156e-4343-8e28-489240ea1319" alt=""><figcaption></figcaption></figure>

When we enable data labels, by default vitara chart will display data labels in its own format i.e. short format. If we want to the values in this format we have to enable the *use metric formatting* option.

<figure><img src="https://106821559-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuIDde50GEkigLbPmGgLx%2Fuploads%2Fz4FLe6ePbMYMGmDAXGbQ%2Fimage.png?alt=media&#x26;token=40fc537a-6719-4764-ab75-0fd53712b759" alt=""><figcaption></figcaption></figure>

Below is the screenshot of the vitara column chart after enabling the *use metric formatting*. Now we can see the dollar sign in the data labels.

\
&#x20;**Note:** When we enable the *use metric formatting* option in the data labels menu, the tooltip also will be displayed in the same format as the data labels.

<figure><img src="https://106821559-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuIDde50GEkigLbPmGgLx%2Fuploads%2FWzmYhpQRNjp4l3Nd9gJz%2Fimage.png?alt=media&#x26;token=5d583e6f-2b09-4da4-a591-08880ab03ef7" alt=""><figcaption></figcaption></figure>

## **Display axis labels in number format.**

To display axis labels in number format, first activate the utilize metric formatting option in the data labels menu, and then enable it in the axis labels menu. The screenshot below shows how to enable metric formatting in the axis labels menu.<br>

<figure><img src="https://106821559-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuIDde50GEkigLbPmGgLx%2Fuploads%2FvVC5ZBfk4qncPuQ6kMOK%2Fimage.png?alt=media&#x26;token=9cd5be38-4a78-4156-9e7c-abef6da1bd9a" alt=""><figcaption></figcaption></figure>

<figure><img src="https://106821559-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuIDde50GEkigLbPmGgLx%2Fuploads%2FSs4YDjo4n6C4cFaRJDPT%2Fimage.png?alt=media&#x26;token=209a5217-6891-475a-b0f0-c9805324e6dc" alt=""><figcaption></figcaption></figure>

## Data label customization <a href="#data-label-customization" id="data-label-customization"></a>

We can modify the default data labels using text and dynamic macros for data. Below is the screenshot of the data labels editor window.

<figure><img src="https://106821559-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuIDde50GEkigLbPmGgLx%2Fuploads%2FePeUNe6wiDn8Tzh2SkBO%2Fimage.png?alt=media&#x26;token=96e12955-1e48-4e41-995b-4fa0aabd3cc5" alt=""><figcaption></figcaption></figure>

Hover the cursor over the ‘i’ symbol to see the available macros for any particular chart. Below is the screenshot.

<figure><img src="https://106821559-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuIDde50GEkigLbPmGgLx%2Fuploads%2FxfpvHaPOOBZzo7O34ueX%2Fimage.png?alt=media&#x26;token=3a9f63ef-3b87-455c-8c43-cb6eb60affb4" alt=""><figcaption></figcaption></figure>

Starting from version 5.3.10, macro suggestions are displayed with a new look. Refer to the screenshot below.

![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252Fm0O474C2L6EIhpt3akrF%252Funknown.png%3Falt%3Dmedia%26token%3D56e5934f-9f91-4c8d-b9d9-bfe965c1e721\&width=300\&dpr=3\&quality=100\&sign=75c037f\&sv=2)

In the editor window type ‘&’ character and you will see macro suggestions. Select the macros and click on ‘“Apply” tab.

For example, the default macros in the above screenshot is &\[point.value], So the chart shows the metric value at each data-point. See the screenshot below:

<figure><img src="https://106821559-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuIDde50GEkigLbPmGgLx%2Fuploads%2F7PuiBWTWaWqKG6pRonWG%2Fimage.png?alt=media&#x26;token=e17c9336-9c22-4715-93bd-dabd2c54bbf2" alt=""><figcaption></figcaption></figure>

Now we will use custom macros in this way &\[point.metricName]: &\[point.value], point.metricname is colored red. And the data labels will display this way now. See the screenshot below:

<figure><img src="https://106821559-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuIDde50GEkigLbPmGgLx%2Fuploads%2FyZjzE5I68WxUieGFIoC8%2Fimage.png?alt=media&#x26;token=3f97708c-b0f7-414c-8cc3-b8c2c5d398a7" alt=""><figcaption></figcaption></figure>

In this way, users can use either text or other macros or combination of both in many possible ways.

## Show Overlapping Data Labels <a href="#show-overlapping-data-labels" id="show-overlapping-data-labels"></a>

All vitara charts are added with the support to show the overlapping data labels. This feature is added in data labels tab with ‘Show Overlapping Labels’ checkbox.

<figure><img src="https://106821559-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuIDde50GEkigLbPmGgLx%2Fuploads%2FKluRyq8Ltutav7jmvhOn%2Fimage.png?alt=media&#x26;token=8f0ed66d-f26d-4fca-943f-548b06aa9d9c" alt=""><figcaption></figcaption></figure>

For example, in line chart when you enable data labels, only few labels are shown on the chart respective to the space available between the datapoints. See the screenshot below:

<figure><img src="https://106821559-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuIDde50GEkigLbPmGgLx%2Fuploads%2FjkXuJMHZIlY7dTfqv55U%2Fimage.png?alt=media&#x26;token=ea73ad97-ad76-41cf-8984-0ff8195aa1a7" alt=""><figcaption></figcaption></figure>

Now, the new feature allows to forcefully show all the data labels. To do this, go to data labels tab and enable the ‘Show Overlapping Labels’ checkbox. See the screenshot below:

<figure><img src="https://106821559-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuIDde50GEkigLbPmGgLx%2Fuploads%2FhtYStrPEbWZEhEd8saiR%2Fimage.png?alt=media&#x26;token=ccab8c15-1c8c-4d97-a11e-3b2645702298" alt=""><figcaption></figcaption></figure>

### Label display Format <a href="#attribute-forms-in-data-labels" id="attribute-forms-in-data-labels"></a>

Three label display formats are available. The reference screenshot is provided below

![](https://docs.vitaracharts.com/~gitbook/image?url=https%3A%2F%2F230207405-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FOuiTPVEbVQnzR38vviPf%252Fuploads%252FMbHmmaEaUHVTAc96wGUm%252Funknown.png%3Falt%3Dmedia%26token%3D84949888-654e-41fc-a42a-318b853bd8c7\&width=300\&dpr=3\&quality=100\&sign=4e3f058d\&sv=2)
