# How to display values on chart

We have a column chart where we have displayed the sales for each month.

<div align="left"><figure><img src="https://3072976205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBK3FPkUaBYESpwhMOzd0%2Fuploads%2Fqg5SU9ecOwVYFHSmW9fk%2Fimage.png?alt=media&#x26;token=4a4ff480-92f0-4352-a814-fe6d77c1ebbe" alt="" width="375"><figcaption><p>A column chart of sales over the months.</p></figcaption></figure></div>

We are going to display the total sales for each month on the chart. For this, we can use the "**Text Template**" field.

## Text Template

To add **Y values** as columns' labels, we enter `%{y}` into the Text Template field.&#x20;

<figure><img src="https://3072976205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBK3FPkUaBYESpwhMOzd0%2Fuploads%2FonoM7MEES9ySfqLGnzV2%2FDisplay%20Values%20on%20Chart.gif?alt=media&#x26;token=3bb5ccee-4723-45bd-9d0b-702d792c5458" alt=""><figcaption><p>Use "<strong>Text Template</strong>" to add Y values as labels.</p></figcaption></figure>

As you see, Y values are added at the end of inside of each column. Also, it formats some of the values automatically for better appearance.

<div align="left"><figure><img src="https://3072976205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBK3FPkUaBYESpwhMOzd0%2Fuploads%2Fo0xkKn6I1CsdvI2qb358%2Fimage.png?alt=media&#x26;token=500d8d99-6732-4e7b-9b8b-2a1c0b25cdc4" alt="" width="563"><figcaption></figcaption></figure></div>

### Values Formatting

To customize the format of label's numbers (or date-time), Plotly  uses D3 format method, which you can see on [Formatting Cheat Sheet](https://nocode-artisan.gitbook.io/plotly-charts/additional-resources/formatting-cheat-sheet) page.

In our case, if we want to display sales with as currency and use SI-prefix with two significant digits we can change the text template to `%{y:$.2s}` that makes the labels looks:

<div align="left"><figure><img src="https://3072976205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBK3FPkUaBYESpwhMOzd0%2Fuploads%2FLh1KMEsda4UIw7ksSN0E%2Fimage.png?alt=media&#x26;token=bf12de40-3640-4fae-81ab-121f68cf84b6" alt="" width="563"><figcaption><p>Custom formatting numbers in text template</p></figcaption></figure></div>

## FAQ

<details>

<summary>Is this feature only available in Bar trace?</summary>

No, this feature is available in all trace modules.

</details>

<details>

<summary>I do the same with a Scatter trace, but labels don't display!</summary>

In scatter traces, you need to make sure that the mode selected for the trace includes text.

<img src="https://3072976205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBK3FPkUaBYESpwhMOzd0%2Fuploads%2FlQCPjh57qjWa5UuXs766%2Fimage.png?alt=media&#x26;token=5d56df57-cf83-440b-963e-3b35c9e3b02a" alt="" data-size="original">

</details>

<details>

<summary>Can I add custom text instead of using the chart's data?</summary>

Yes, of course, you can enter your text directly in the field. Only the values inside `%{ }` are created dynamically according to the data. \
Likewise, you can use static and dynamic text at the same time. `Sales: %{y}`

</details>

<details>

<summary>Could I add margins for inside labels?</summary>

You can add extra spaces before/after your template to add gaps. `%{y}`

</details>