Plotly Graph Card

Post in HomeAssistant community forum

You may find some extra info there in this link

More yaml examples

Find more advanced examples in Show & Tell

Installation via HACS

Search for Plotly Graph Card.

Card Config

New 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: 1
refresh_interval: 10 # in seconds

Range Selector buttons

type: custom:plotly-graph
entities:
  - entity: sensor.temperature
refresh_interval: 10
hours_to_show: 12
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

Features

Anything you can do with scatter and barcharts in plotly
Zoom / Pan, etc.
Data is loaded in the background
Axes are automatically configured based on the units of each trace
Configuration compatible with the History Card

For now only the only allowed chart types are:

Bar charts https://plotly.com/javascript/bar-charts/#basic-bar-chart
Line and scatter https://plotly.com/javascript/line-and-scatter/

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

entities:
  - entity: sensor.temperature
  - entity: sensor.humidity

Color schemes

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

type: custom:plotly-graph
entities:
  - sensor.temperature1
  - sensor.temperature2
color_scheme: dutch_field
# color_scheme: 1 # or use numbers instead 0 to 24 available

Attribute values

Plot the attributes of an entity by adding ::atribute_name to the entity name

entities:
  - entity: climate.living::temperature
  - entity: climate.kitchen::temperature

Extra entity attributes:

entities:
  - entity: sensor.temperature_in_celsius
    name: living temperature in Farenheit # Overrides the entity name
    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
    texttemplate: >- # custom format for show_value
      <b>%{y}</b>%{customdata.unit_of_measurement}<br>
      %{customdata.name}
    hovertemplate: >- # custom format for tooltip
      <b>%{customdata.name}</b><br><i>%{x}</i><br>
      %{y}%{customdata.unit_of_measurement}
      <extra></extra>

`lambda:` transforms

lambda takes a js function (as a string) to pre process the data before plotting it. Here you can do things like normalisation, integration. For example:

Normalisation wrt to last

type: custom:plotly-graph
entities:
  - entity: sensor.my_sensor
     lambda: |-
        (ys) => ys.map(y => y/ys[ys.length-1])

Normalisation wrt to first fetched value

  - entity: sensor.my_sensor
     lambda: |-
        (ys) => ys.map(y => y/ys[0])

note: ys[0] represents the first "known" value, which is the value furthest to the past among the downloaded data. This value will change if you scroll, zoom out, change the hours_to_show, or just let time pass.

Accumulated value

  - entity: sensor.my_sensor
     unit_of_measurement: "total pulses"
     lambda: |-
        (ys) => {
          let accumulator = 0;
          return ys.map(y => accumulator + y)
        }

Derivative

  - entity: sensor.my_sensor
     unit_of_measurement: "pulses / second"
     lambda: |-
        (ys, xs) => {
          let last = {
            x: new Date(),
            y: 0,
          }
          return ys.map((y, index) => {
            const x = xs[index];
            const dateDelta = x - last.x;
            accumulator += (y - last.y) / dateDelta;
            last = { x, y };
            return accumulator;
          })
        }

Right hand riemann integration

  - entity: sensor.my_sensor
     unit_of_measurement: "kWh"
     lambda: |-
        (ys, xs) => {
          let accumulator = 0;
          let last = {
            x: new Date(),
            y: 0,
          }
          return ys.map((y, index) => {
            const x = xs[index]
            const dateDelta = x - last.x;
            accumulator += last.y * dateDelta;
            last = { x, y };
            return accumulator;
          })
        }

Access all entity attributes inside lambda

- entity: climate.wintergarten_floor::valve
  unit_of_measurement: °C
  lambda: |-
    (ys, xs, entity) => 
      entity.map(({attributes}) => 
        return +attributes.temperature - (+attributes.valve / 100) * 2
      )

Custom x coordinates of traces

- entity: climate.wintergarten_floor
  unit_of_measurement: °C
  lambda: |-
    (ys, xs, entity) => ({
      x: xs.map(x => -x),
      y: ys.map(y => y / 2),
    })

Default trace & axis styling

default configurations for all entities and all yaxes (e.g yaxis, yaxis2, yaxis3, etc).

entities:
  - sensor.temperature1
  - sensor.temperature2
defaults:
  entity:
    fill: tozeroy
    line:
      width: 2
  yaxes:
    fixedrange: true # disables vertical zoom & scroll

layout:

To define layout aspects, like margins, title, axes names, ... Anything from https://plotly.com/javascript/reference/layout/.

disable default layout:

Use this if you want to use plotly default layout instead. Very useful for heavy customization while following pure plotly examples.

entities:
  - entity: sensor.temperature_in_celsius
no_default_layout: true

disable Home Assistant themes:

entities:
  - entity: sensor.temperature_in_celsius
no_theme: true

config:

To define general configurations like enabling scroll to zoom, disabling the modebar, etc. Anything from https://plotly.com/javascript/configuration-options/.

hours_to_show:

How many hours are shown. Exactly the same as the history card, except decimal values (e.g 0.1) do actually work

refresh_interval:

Update data every refresh_interval seconds. Use 0 or delete the line to disable updates

Development

Clone the repo
run npm i
run npm start
From a dashboard in edit mode, go to Manage resources and add http://127.0.0.1:8000/plotly-graph-card.js as url with resource type JavaScript
ATTENTION: The development card is type: custom:plotly-graph-dev

Build

npm run build

Release

npm version minor
git push
click on releases/new draft from tag in github

Proper HACS integration and automated release pending.

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

dbuezas / lovelace-plotly-graph-card

Programming Languages

Labels

Projects that are alternatives of or similar to lovelace-plotly-graph-card

Plotly Graph Card

Post in HomeAssistant community forum

More yaml examples

Installation via HACS

Card Config

Advanced

Filling, line width, color

Range Selector buttons

Features

Entities:

Color schemes

Attribute values

Extra entity attributes:

`lambda:` transforms

Normalisation wrt to last

Normalisation wrt to first fetched value

Accumulated value

Derivative

Right hand riemann integration

Access all entity attributes inside lambda

Custom x coordinates of traces

Default trace & axis styling

layout:

disable default layout:

disable Home Assistant themes:

config:

hours_to_show:

refresh_interval:

Development

Build

Release

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

dbuezas / lovelace-plotly-graph-card

Programming Languages

Labels

Projects that are alternatives of or similar to lovelace-plotly-graph-card

Plotly Graph Card

Post in HomeAssistant community forum

More yaml examples

Installation via HACS

Card Config

Advanced

Filling, line width, color

Range Selector buttons

Features

Entities:

Color schemes

Attribute values

Extra entity attributes:

lambda: transforms

Normalisation wrt to last

Normalisation wrt to first fetched value

Accumulated value

Derivative

Right hand riemann integration

Access all entity attributes inside lambda

Custom x coordinates of traces

Default trace & axis styling

layout:

disable default layout:

disable Home Assistant themes:

config:

hours_to_show:

refresh_interval:

Development

Build

Release

`lambda:` transforms