Comments (7)
Oh, I found a way to force a right padding in the graph so the text fits to the right.
The idea is to add an invisible but big marker.
type: custom:plotly-graph-dev
entities:
- entity: sensor.openweathermap_temperature # the lines
yaxis: y1
line:
color: '#1f77b4'
- entity: sensor.openweathermap_temperature # the text
yaxis: y1
unit_of_measurement: W floor
mode: text+markers
texttemplate: '%{y}'
textposition: middle right
showlegend: false
marker:
color: '#1f77b4'
textfont:
color: '#1f77b4'
lambda: (ys) => ys.map((y,i)=> (i=== ys.length-1) && y)
- entity: sensor.openweathermap_temperature # the invisible marker to make space for the text
yaxis: y1
mode: markers
showlegend: false
marker:
opacity: 0
size: 50
lambda: (ys, xs) => ys.map((y,i)=> (i=== ys.length-1) && y)
hours_to_show: 24
refresh_interval: 10
from lovelace-plotly-graph-card.
Absolutely amazing!
Thank you very much!
from lovelace-plotly-graph-card.
type: custom:plotly-graph
entities:
- entity: sensor.openweathermap_temperature
yaxis: y1
line:
color: red
- entity: sensor.openweathermap_temperature
yaxis: y1
unit_of_measurement: W floor
mode: markers+text
texttemplate: '%{y}'
textposition: top middle
showlegend: false
marker:
color: red
textfont:
color: red
lambda: (ys) => ys.map((y,i)=> (i=== ys.length-1) && y)
hours_to_show: 24
refresh_interval: 10
Here are the default plotly colors:
[
'#1f77b4', # muted blue
'#ff7f0e', # safety orange
'#2ca02c', # cooked asparagus green
'#d62728', # brick red
'#9467bd', # muted purple
'#8c564b', # chestnut brown
'#e377c2', # raspberry yogurt pink
'#7f7f7f', # middle gray
'#bcbd22', # curry yellow-green
'#17becf' # blue-teal
]
More about colors here
More info about texttemplate here
You can do textposition: middle right
but you'll sometimes have to scroll to the right
from lovelace-plotly-graph-card.
It's a bit convoluted, but it seems to work fine :)
I added this example in the discussions, including the legend grouping thing from the link you sent. You will probably want to use that one instead.
#16
from lovelace-plotly-graph-card.
BTW: I'd really appreciate it if you would make a post in https://github.com/dbuezas/lovelace-plotly-graph-card/discussions/categories/show-and-tell with some of your plots (yaml+screenshot) so others can use it as an example. You seem to be keen on getting to the advanced stuff :)
from lovelace-plotly-graph-card.
I need some more help here. 😄
When we force the right padding we get the same space at the left.
The space disappears when I press a rangeselector button.
But will come back when I press reset.
I have succeeded by manually forcing "range" to 2 hours more than the time I want to show. I normally show 12 hours.
But I do not figure out how to make automatic time range
.
from lovelace-plotly-graph-card.
@markuska00:
did you figure out how to prevent the left space? I stumbled across this nice idea but the left space looks a bit weird ^^
from lovelace-plotly-graph-card.
Related Issues (20)
- reset_every filter does not consider start of [day|week|month] HOT 3
- Color Threshold or Color Scale in chart HOT 1
- Data not being updated on real time HOT 16
- Display times with HA selected timezone?
- Gaps in data when scrolling HOT 16
- Non null flat line joining when no data HOT 23
- Pie chart not working HOT 3
- URL duplicated in the `no_default_layout` deprecation message HOT 3
- Add a "year" grouping option in period
- Edition window moves under Safari
- Add notation points along realtime graph.
- Range of data not updating when zooming out HOT 4
- "resample" does not allign traces iwth different initial starting points HOT 1
- Show value missing when using filter HOT 2
- Resample is not timezone aware HOT 2
- To be able to detect whether a trace is displayed (enabled or disabled in the legend) HOT 3
- Statistic data is not renewed within graphs's live time HOT 1
- Fillgradient in scatter graphs HOT 1
- FR: Using Plotly.Fx.hover in callbacks
- Global or tag based date and time picker. HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from lovelace-plotly-graph-card.