Plotly Graph Card

Post in HomeAssistant community forum

You may find some extra info there in this link

Index of examples with images

You can browse this list and find yamls by looking at images

Created with this quick and dirty script

More yaml examples

Find more advanced examples in Show & Tell

Installation

Via Home Assistant Community Store (Recommended)

1. Install HACS
2. Search & Install Plotly Graph Card.

Manually

1. Go to Releases
2. Download plotly-graph-card.js and copy it to your Home Assistant config dir as <config>/www/plotly-graph-card.js
3. Add a resource to your dashboard configuration. There are two ways:
4. Using UI: Settings → Dashboards → More Options icon → Resources → Add Resource → Set Url as /local/plotly-graph-card.js → Set Resource type as JavaScript Module. Note: If you do not see the Resources menu, you will need to enable Advanced Mode in your User Profile
5. Using YAML: Add following code to lovelace section. resources: - url: /local/plotly-graph-card.js type: module

Card Config

Visual Config editor available for Basic Configs (*)

type: custom:plotly-graph
entities:
  - sensor.monthly_internet_energy
  - sensor.monthly_teig_energy
  - sensor.monthly_office_energy
  - sensor.monthly_waschtrockner_energy
hours_to_show: 24
refresh_interval: 10

(*) I'm reusing the editor of the standard History Card. Cheap, yes, but it works fine. Use yaml for advanced functionality

Advanced

Filling, line width, color

type: custom:plotly-graph
entities:
  - entity: sensor.office_plug_wattage
  # see examples: https://plotly.com/javascript/line-and-scatter/
  # see full API: https://plotly.com/javascript/reference/scatter/#scatter
  - entity: sensor.freezer_plug_power
    fill: tozeroy
    line:
      color: red
      dash: dot
      width: 1

layout:
  plot_bgcolor: lightgray
  height: 400
config:
  scrollZoom: false

hours_to_show: 1h
refresh_interval: 10 # in seconds

Range Selector buttons

type: custom:plotly-graph
entities:
  - entity: sensor.temperature
refresh_interval: 10
hours_to_show: 12h
layout:
  xaxis:
    rangeselector:
      # see examples: https://plotly.com/javascript/range-slider/
      # see API: https://plotly.com/javascript/reference/layout/xaxis/#layout-xaxis-rangeselector
      "y": 1.2
      buttons:
        - count: 1
          step: minute
        - count: 1
          step: hour
        - count: 12
          step: hour
        - count: 1
          step: day
        - count: 7
          step: day

See also: autorange_after_scroll

See also: Custom buttons

Features

• Anything you can do with in plotlyjs except maps
• Zoom / Pan, etc.
• Data is loaded on demand
• Axes are automatically configured based on the units of each trace
• Basic configuration compatible with the History Card

Get ideas from all charts in here https://plotly.com/javascript/

Entities:

• entities translates to the data argument in PlotlyJS

• each entity will be translated to a trace inside the data array.

  • x (states) and y (timestamps of stored states)
  • you can add any attribute that works in a plotly trace
  • see https://plotly.com/javascript/reference/scatter/#scatter-line for more

type: custom:plotly-graph
entities:
  - entity: sensor.temperature
  - entity: sensor.humidity

Alternatively:

type: custom:plotly-graph
entities:
  - sensor.temperature
  - sensor.humidity

Color schemes

Changes default line colors. See more here: https://github.com/dbuezas/lovelace-plotly-graph-card/blob/master/src/parse-config/parse-color-scheme.ts

type: custom:plotly-graph
entities:
  - sensor.temperature1
  - sensor.temperature2
color_scheme: dutch_field
# or use numbers instead 0 to 24 available:
# color_scheme: 1
# or pass your color scheme
# color_scheme: ["#1b9e77","#d95f02","#7570b3","#e7298a","#66a61e","#e6ab02","#a6761d","red"]

Attribute values

Plot the attributes of an entity

type: custom:plotly-graph
entities:
  - entity: climate.living
    attribute: temperature
  - entity: climate.kitchen
    attribute: temperature

Statistics support

Fetch and plot long-term statistics of an entity

for entities with state_class=measurement (normal sensors, like temperature)

type: custom:plotly-graph
entities:
  - entity: sensor.temperature
    statistic: max # `min`, `mean` of `max`
    period: 5minute # `5minute`, `hour`, `day`, `week`, `month`, `auto` # `auto` varies the period depending on the zoom level

for entities with state_class=total (such as utility meters)

type: custom:plotly-graph
entities:
  - entity: sensor.temperature
    statistic: state # `state` or `sum`
    period: 5minute # `5minute`, `hour`, `day`, `week`, `month`, `auto` # `auto` varies the period depending on the zoom level

automatic period

The option auto makes the period relative to the currently visible time range. It picks the longest period, such that there are at least 100 datapoints in screen.

type: custom:plotly-graph
entities:
  - entity: sensor.temperature
    statistic: mean
    period: auto

It is equivalent to writing:

type: custom:plotly-graph
entities:
  - entity: sensor.temperature
    statistic: mean
    period:
      0m: 5minute
      100h: hour
      100d: day
      100w: week
      100M: month # note uppercase M for month. Lowercase are minutes

step function for auto period

type: custom:plotly-graph
entities:
  - entity: sensor.temperature
    statistic: mean
    period:
      0s: 5minute
      24h: hour # when the visible range is ≥ 1 day, use the `hour` period
      7d: day # from 7 days on, use `day`
      6M: week # from 6 months on, use weeks. Note Uppercase M! (lower case m means minutes)
      1y: month # from 1 year on, use `month

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 a scatter plot.

Warning: don't use it with bar charts, it will only add an extra bar and no text

Examples:

type: custom:plotly-graph
entities:
  - entity: sensor.temperature
    show_value: true

Often one wants this to be the case for all entities

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:

layout:
  margin:
    r: 100

Or make space inside the the plot like this:

time_offset: 3h

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 time_offset attribute you can shift the data so it is placed in the correct position. Another possible use is to compare past data with the current one. For example, you can plot yesterday's temperature and the current one on top of each other.

The time_offset flag can be specified in two places. 1) When used at the top level of the configuration, it specifies how much "future" the graph shows by default. For example, if hours_to_show is 16 and time_offset is 3h, the graph shows the past 13 hours (16-3) plus the next 3 hours. 2) When used at the trace level, it offsets the trace by the specified amount.

type: custom:plotly-graph
hours_to_show: 16
time_offset: 3h
entities:
  - entity: sensor.current_temperature
    line:
      width: 3
      color: orange
  - entity: sensor.current_temperature
    name: Temperature yesterday
    time_offset: 1d
    line:
      width: 1
      dash: dot
      color: orange
  - entity: sensor.temperature_12h_forecast
    time_offset: 12h
    name: Forecast temperature
    line:
      width: 1
      dash: dot
      color: grey

Now line

When using offsets, it is useful to have a line that indicates the current time. This can be done by using a universal function that returns a line with the current time as x value and 0 and 1 as y values. The line is then hidden from the legend.

type: custom:plotly-graph
hours_to_show: 6h
time_offset: 3h
entities:
  - entity: sensor.forecast_temperature
    yaxis: y1
    time_offset: 3h
  - entity: ""
    name: Now
    yaxis: y9
    showlegend: false
    line:
      width: 1
      dash: dot
      color: deepskyblue
    x: $ex [Date.now(), Date.now()]
    y: [0, 1]
layout:
  yaxis9:
    visible: false
    fixedrange: true

Duration

Whenever a time duration can be specified, this is the notation to use:

Unit	Suffix	Notes
Milliseconds	ms
Seconds	s
Minutes	m
Hours	h
Days	d
Weeks	w
Months	M	30 days
Years	y	365 days

Example:

time_offset: 3h

Extra entity attributes:

type: custom:plotly-graph
entities:
  - entity: sensor.temperature_in_celsius
    name: living temperature in Farenheit # Overrides the entity name
    unit_of_measurement: °F # Overrides the unit
    show_value: true # shows the last value as text
    customdata: |
      $fn ({states}) => 
        states.map( () => ({ extra_attr: "hello" }) )
      # customdata is array with the same number of values as x axis (states)
      # use statistics instead of states if entity is based on statistic   
    texttemplate: >- # custom format for show_value
      <b>%{y}</b>%{customdata.extra_attr}


      # to show only 2 decimals: "%{y:.2f}"
      # see more here: https://plotly.com/javascript/hover-text-and-formatting/
      # only x, y, customdata are available as %{} template

    hovertemplate: | # custom format for hover text using entity properites name and unit_of_measurement
      $fn ({ getFromConfig }) =>
      ` <b>${getFromConfig(".name")}</b>


      <i>%{x}</i>


      %{y}${getFromConfig(".unit_of_measurement")}
      <extra></extra>` # <extra></extra> removes text on the side of the tooltip (it otherwise defaults to the entity name)

Extend_to_present

The boolean extend_to_present will take the last known datapoint and "expand" it to the present by creating a duplicate and setting its date to now. This is useful to make the plot look fuller. It's recommended to turn it off when using offsets, or when setting the mode of the trace to markers. Defaults to true for state history, and false for statistics.

type: custom:plotly-graph
entities:
  - entity: sensor.weather_24h_forecast
    mode: "markers"
    extend_to_present: false # true by default for state history
  - entity: sensor.actual_temperature
    statistics: mean
    extend_to_present: true # false by default for statistics

filters:

Filters are used to process the data before plotting it. Inspired by ESPHome's sensor filters. Filters are applied in order.

``yaml type: custom:plotly-graph entities: - entity: sensor.temperature_in_celsius filters: - store_var: myVar # stores the datapoints insidevars.myVar- load_var: myVar # loads the datapoints fromvars.myVar`

  # The filters below will only be applied to numeric values. Missing (unavailable) and non-numerics will be left untouched
  - add: 5 # adds 5 to each datapoint
  - multiply: 2 # multiplies each datapoint by 2
  - calibrate_linear:
    # Left of the arrow are the measurements, right are the expected values.
    # The mapping is then approximated through linear regression, and that correction is applied to