How to display values on chart

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

A column chart of sales over the months.

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.

Use "Text Template" to add Y values as labels.

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.

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 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:

Custom formatting numbers in text template

FAQ

Is this feature only available in Bar trace?

No, this feature is available in all trace modules.

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

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

Can I add custom text instead of using the chart's data?

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}

Could I add margins for inside labels?

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