Skip to content

Commit 7f97ac2

Browse files
committed
Adding a prefix and suffix
1 parent a8ae4ab commit 7f97ac2

File tree

1 file changed

+31
-4
lines changed

1 file changed

+31
-4
lines changed

doc/python/indicator.md

Lines changed: 31 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ jupyter:
55
text_representation:
66
extension: .md
77
format_name: markdown
8-
format_version: '1.1'
9-
jupytext_version: 1.2.1
8+
format_version: '1.3'
9+
jupytext_version: 1.13.7
1010
kernelspec:
11-
display_name: Python 3
11+
display_name: Python 3 (ipykernel)
1212
language: python
1313
name: python3
1414
language_info:
@@ -20,7 +20,7 @@ jupyter:
2020
name: python
2121
nbconvert_exporter: python
2222
pygments_lexer: ipython3
23-
version: 3.7.3
23+
version: 3.9.0
2424
plotly:
2525
description: How to make gauge charts in Python with Plotly.
2626
display_as: financial
@@ -61,6 +61,8 @@ In this tutorial we introduce a new trace named "Indicator". The purpose of "ind
6161
<li> (increasing|decreasing).symbol: symbol displayed on the left of the delta</li>
6262
<li> font.(family|size): to control the font</li>
6363
<li> position: position relative to `number` (either top, left, bottom, right)</li>
64+
<li> suffix: a string to appear before the delta.
65+
<li> prefix: a string to appear after the delta.
6466
</ol>
6567
Finally, we can have a simple title for the indicator via `title` with 'text' attribute which is a string, and 'align' which can be set to left, center, and right.
6668
There are two gauge types: [angular](https://plotly.com/python/gauge-charts/) and [bullet](https://plotly.com/python/bullet-charts/). Here is a combination of both shapes (angular, bullet), and different modes (gauge, delta, and value):
@@ -201,6 +203,31 @@ fig.add_trace(go.Indicator(
201203
fig.show()
202204
```
203205

206+
#### Adding a Prefix and Suffix
207+
208+
209+
On both a `number` and a `delta`, you can add a string to appear before the value using `suffix`. You can add a string to appear after the value with `prefix`. In the following example, we add '$' as a `prefix` and 'm' as `suffix` for both the `number` and `delta`.
210+
211+
Note: `suffix` and `prefix` on `delta` are new in 5.10
212+
213+
```python
214+
import plotly.graph_objects as go
215+
216+
fig = go.Figure(go.Indicator(
217+
mode = "number+delta",
218+
value = 492,
219+
number = {"prefix": "$", "suffix": "m"},
220+
delta = {"reference": 512, "valueformat": ".0f", "prefix": "$", "suffix": "m"},
221+
title = {"text": "Profit"},
222+
domain = {'y': [0, 1], 'x': [0.25, 0.75]}))
223+
224+
fig.add_trace(go.Scatter(
225+
y = [325, 324, 405, 400, 424, 404, 417, 432, 419, 394, 410, 426, 413, 419, 404, 408, 401, 377, 368, 361, 356, 359, 375, 397, 394, 418, 437, 450, 430, 442, 424, 443, 420, 418, 423, 423, 426, 440, 437, 436, 447, 460, 478, 472, 450, 456, 436, 418, 429, 412, 429, 442, 464, 447, 434, 457, 474, 480, 499, 497, 480, 502, 512, 492]))
226+
227+
fig.update_layout(xaxis = {'range': [0, 62]})
228+
fig.show()
229+
```
230+
204231
#### Reference
205232
See https://plotly.com/python/reference/indicator/ for more information and chart attribute options!
206233

0 commit comments

Comments
 (0)