-
Notifications
You must be signed in to change notification settings - Fork 1
texttemplate.py tutorial #151
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 5 commits
4233260
fe30afb
51f5aef
088e19e
252ec10
5c17542
921ca0b
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -512,5 +512,73 @@ fig.update_layout( | |
fig.show() | ||
``` | ||
|
||
|
||
### Customize Displayed Text with a Text Template | ||
To show an arbitrary text in your chart you can use [texttemplate](https://plot.ly/python/reference/#pie-texttemplate), which is a template string used for rendering the information, and will override [textinfo](https://plot.ly/python/reference/#treemap-textinfo). | ||
This template string can include `variables` in %{variable} format, `numbers` in [d3-format's syntax](https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#d3_forma), and `date` in [d3-time-fomrat's syntax](https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md#format). | ||
`texttemplate` customizes the text that appears on your plot vs. [hovertemplate](https://plot.ly/python/reference/#pie-hovertemplate) that customizes the tooltip text. | ||
|
||
```python | ||
import plotly.graph_objects as go | ||
|
||
fig = go.Figure(go.Pie( | ||
values = [2, 5, 3, 2.5], | ||
labels = ["R", "Python", "Java Script", "Matlab"], | ||
texttemplate = "%{label}: %{value} (%{percent})", | ||
textposition = "inside")) | ||
|
||
fig.show() | ||
``` | ||
|
||
### Customize Text Template | ||
|
||
The following example uses [textfont](https://plot.ly/python/reference/#scatterternary-textfont) to customize the added text. | ||
|
||
```python | ||
import plotly.graph_objects as go | ||
|
||
fig = go.Figure(go.Scatterternary( | ||
a = [3, 2, 5], | ||
b = [2, 5, 2], | ||
c = [5, 2, 2], | ||
mode = "markers+text", | ||
text = ["A", "B", "C"], | ||
texttemplate = "%{text}<br>(%{a:.2f}, %{b:.2f}, %{c:.2f})", | ||
textposition = "bottom center", | ||
textfont = {'family': "Times", 'size': [18, 21, 20], 'color': ["IndianRed", "MediumPurple", "DarkOrange"]} | ||
)) | ||
|
||
fig.show() | ||
``` | ||
### Set Date in Text Template | ||
The following example shows how to show date by setting [axis.type](https://plot.ly/python/reference/#layout-yaxis-type) in [funnel charts](https://plot.ly/python/funnel-charts/). | ||
As you can see [textinfo](https://plot.ly/python/reference/#funnel-textinfo) and [texttemplate](https://plot.ly/python/reference/#funnel-texttemplate) have the same functionality when you want to determine 'just' the trace information on the graph. | ||
|
||
```python | ||
from plotly import graph_objects as go | ||
|
||
fig = go.Figure() | ||
|
||
fig.add_trace(go.Funnel( | ||
name = 'Montreal', | ||
orientation = "h", | ||
y = ["2018-01-01", "2018-07-01", "2019-01-01", "2020-01-01"], | ||
x = [100, 60, 40, 20], | ||
textposition = "inside", | ||
texttemplate = "%{label}")) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It would actually be interesting to use a different date format here to show how to customize the format. But I can't get it to work... Maybe I'll ping you on this @nicolaskruchten There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. So this could work for example There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think it's quite important to show an example with custom date formatting, because the formatting is quite specific |
||
|
||
fig.add_trace(go.Funnel( | ||
name = 'Vancouver', | ||
orientation = "h", | ||
y = ["2018-01-01", "2018-07-01", "2019-01-01", "2020-01-01"], | ||
x = [90, 70, 50, 10], | ||
textposition = "inside", | ||
textinfo = "label")) | ||
|
||
fig.update_layout(yaxis = {'type': 'date'}) | ||
|
||
fig.show() | ||
``` | ||
|
||
#### Reference | ||
See https://plot.ly/python/reference/#layout-annotations for more information and chart attribute options! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@nicolaskruchten I think this is the pie chart example you were asking for, just using programming languages instead of revenue. Would you prefer having a more business-oriented example with dollars? (with the $ symbol in the template). @Mahdis-z you can give it a try with revenue by activity sector for example
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
So I chatted with Nicolas and he pointed out we would need an example of something which we cannot do with
textinfo
, such as in the pie chart displaying the values as, for example, formatting 12 000 000 as $ 12M. @Mahdis-z could you please add such an example after the current pie chart example?