diff --git a/readme.md b/readme.md
index effbcce..92ccdc3 100644
--- a/readme.md
+++ b/readme.md
@@ -258,6 +258,44 @@ entities:
Note that `5minute` period statistics are limited in time as normal recorder history is, contrary to other periods which keep data for years.
+## show_value:
+
+Shows the value of the last datapoint as text in the plot.
+
+Examples:
+
+```yaml
+type: custom:plotly-graph
+entities:
+ - entity: sensor.temperature
+ show_value: true
+```
+
+Often one wants this to be the case for all entities
+
+```yaml
+defaults:
+ entity:
+ show_value: true
+```
+
+If you want to make extra room for the value, you can either increase the right margin of the whole plot like this:
+
+```yaml
+layout:
+ margin:
+ r: 100
+```
+
+Or make space inside the the plot like this:
+
+```yaml
+defaults:
+ entity:
+ show_value:
+ right_margin: 20 # this is 20% of the space in the x axis
+```
+
## Offsets
Offsets are useful to shift data in the temporal axis. For example, if you have a sensor that reports the forecasted temperature 3 hours from now, it means that the current value should be plotted in the future. With the `offset` attribute you can shift the data so it is placed in the correct position.
@@ -365,8 +403,7 @@ entities:
lambda: |- # Transforms the data
(ys) => ys.map(y => (y × 9/5) + 32)
unit_of_measurement: °F # Overrides the unit
- show_value: # shows the last value with 40% right margin
- right_margin: 40
+ show_value: true # shows the last value as text
texttemplate: >- # custom format for show_value
%{y}%{customdata.unit_of_measurement}
%{customdata.name}
diff --git a/src/plotly-graph-card.ts b/src/plotly-graph-card.ts
index 46098df..87c0fc5 100644
--- a/src/plotly-graph-card.ts
+++ b/src/plotly-graph-card.ts
@@ -285,7 +285,7 @@ export class PlotlyGraph extends HTMLElement {
const padPercent = Math.max(
...this.parsed_config.entities.map(({ show_value }) => {
if (show_value === false) return 0 / 100;
- if (show_value === true) return 10 / 100;
+ if (show_value === true) return 0 / 100;
return show_value.right_margin / 100;
})
);
@@ -545,6 +545,7 @@ export class PlotlyGraph extends HTMLElement {
show_value_traces.push({
texttemplate: `%{y:.2~f}%{customdata.unit_of_measurement}`, // here so it can be overwritten
...mergedTrace,
+ cliponaxis: false, // allows the marker + text to be rendered above the right y axis. See https://github.com/dbuezas/lovelace-plotly-graph-card/issues/171
mode: "text+markers",
showlegend: false,
hoverinfo: "skip",
diff --git a/src/themed-layout.ts b/src/themed-layout.ts
index 109fd77..7e4abdb 100644
--- a/src/themed-layout.ts
+++ b/src/themed-layout.ts
@@ -7,6 +7,9 @@ const defaultExtraYAxes: Partial = {
overlaying: "y",
showgrid: false,
visible: false,
+ // This makes sure that the traces are rendered above the right y axis,
+ // including the marker and its text. Useful for show_value. See cliponaxis in entity
+ layer: "below traces",
};
const defaultLayout: Partial = {