Pie charts

[plord12]

Describe the bug
Trying to create a pie chart appears to fail. No errors reported in console log.

Screenshots
Just a blank screen.

yaml

type: custom:plotly-graph
entities:
  - entity: sensor.arm3_cpu_used_percent
    type: pie
hours_to_show: 24
refresh_interval: 10

Additional context
I couldn't find any docs or examples on how to create a pie chart (in yaml) so I'm guessing a bit.

[dbuezas]

Pie charts work differently, there are no x and y arrays.
You need to use universal functions ($fn or $ex) to massage the data into values and labels. Search the readme of this repo and see this: https://plotly.com/javascript/pie-charts/

Please do post your results! :)

[plord12]

Thanks for the hints ... although still challenging to figure out. I now have -

type: custom:plotly-graph
entities:
  - entity: sensor.octopus_peak_energy_daily
    type: pie
    values: >-
      $ex [ hass.states["sensor.octopus_peak_energy_daily"].state,
      hass.states["sensor.octopus_offpeak_energy_daily"].state,
      hass.states["sensor.myenergi_libbi_solar_generation_today"].state ]
    labels:
      - Grid Peak
      - Grid Offpeak
      - Solar
    marker:
      colors:
        - red
        - green
        - orange
    textinfo: value+percent
hours_to_show: 24
refresh_interval: 10

[dbuezas]

Cool!, you figured it out!
I suggest you set:

refresh_interval: auto # it will refresh each time whatever is after `entity: xxx` changes
hours_to_show: 0 # nothing of what is fetched is used, so you may as well set it to zero

[Ben00793]

Hi,
I'm using this pie chart to display my load sources of the day:

type: custom:plotly-graph
view_layout:
  position: sidebar
title: Load Energy Sources
entities:
  - entity: sensor.load_energy
    type: pie
    hole: 0.4
    values: |-
      $ex [
        Number(hass.states["sensor.battery_energy_out_old"].state).toFixed(2),
        Number(hass.states["sensor.simulated_grid_energy_import_meter"].state).toFixed(2),
        Number(hass.states["sensor.self_consumed_solar_energy_day"].state).toFixed(2)
      ]
    labels:
      - Battery Charge
      - Grid Offpeak
      - Self-Consumed Solar
    marker:
      colors:
        - rgb(151, 90, 182)
        - rgb(84, 144, 194)
        - rgb(255, 155, 48)
    textinfo: value+percent
hours_to_show: 1
refresh_interval: auto
layout:
  height: 410
  margin:
    t: 60
  showlegend: false
  annotations:
    - text: |-
        $fn ({hass}) =>
          "<span style='font-size: 24px;'><span style='color: rgb(255, 155, 48'>"
          + Number(hass.states['sensor.self_consumed_solar_energy_day'].state).toFixed(1) + "</span></span>kWh<br>"
          +  "</span><span style=''>Self-Consumed Solar</span><br>"
      xref: paper
      yref: paper
      xanchor: center
      yanchor: center
      x: 0.05
      'y': 1.2
      showarrow: false
    - text: |-
        $fn ({hass}) =>
          "<span style='font-size: 24px;'><span style='color: rgb(151, 90, 182)'>"
          + Number(hass.states['sensor.battery_energy_out_old'].state).toFixed(1) + "</span></span>kWh<br>"
          +  "</span><span style=''>Battery</span><br>"
      xref: paper
      yref: paper
      xanchor: center
      yanchor: center
      x: 0.5
      'y': 1.2
      showarrow: false
    - text: |-
        $fn ({hass}) =>
          "<span style='font-size: 24px;'><span style='color: rgb(84, 144, 194)'>"
          + Number(hass.states['sensor.grid_energy_in'].state).toFixed(1) + "</span></span>kWh<br>"
          +  "</span><span style=''>Grid</span><br>"
      xref: paper
      yref: paper
      xanchor: center
      yanchor: centre
      x: 0.9
      'y': 1.2
      showarrow: false
    - text: |-
        $fn ({hass}) =>
          "<span style='font-size: 24px;'><span style='color: rgb(84, 144, 194)'>"
          + Number(hass.states['sensor.load_energy'].state).toFixed(1) + "</span></span>kWh<br>"
          +  "</span><span style=''>Load</span><br>"
      xref: paper
      yref: paper
      xanchor: center
      yanchor: centre
      x: 0.5
      'y': 0.5
      showarrow: false
updatemenus:
  - buttons:
      - label: 1 Day
        method: restyle
        args:
          - hours_to_show: 24
      - label: 2 Days
        method: restyle
        args:
          - hours_to_show: 48
      - label: 7 Days
        method: restyle
        args:
          - hours_to_show: 168
      - label: 14 Days
        method: restyle
        args:
          - hours_to_show: 336
      - label: <
        method: animate
        args:
          - layout:
              xaxis.range:
                - -1
                - -1
      - label: '>'
        method: animate
        args:
          - layout:
              xaxis.range:
                - 1
                - 1
    direction: left
    pad:
      r: 10
      t: 10
    showactive: true
    type: buttons
    x: 1
    xanchor: right
    'y': 1.2
    yanchor: top

I would like to have to option to scroll back and see data from yesterday or last 30 days or this year.
Like this:

How can i do this?

[dbuezas]

I don't know if this is possible, since the pie chart has no x axis to handle time.
What you could do though, is plot each entity as a daily bar chart and tell plotly to accumulate them to 100%

type: custom:plotly-graph

entities: 
  - entity: sensor.first
  - entity: sensor.second

defaults:
  entity: 
     type: bar
     period: day

layout:
  barnorm: percent
  barmode: stack