Controlling Pie chart labels (add values) and naming

[bazcurtis]

I ma making good progress on my migration away from Apex Cards, but I am having some issues with labels in Pie charts. I can't seem to see many examples of pie charts.

I want to add values to the labels and centre them. The name that works with other types of types doesn't seem to work. Even if it did, I still want to add the values from the slices.

Any pointers would be apprecaited.

type: custom:plotly-graph
title: Daily Cost
entities:
  - entity: >-
      sensor.octopus_energy_electricity_current_accumulative_cost
    showlegend: true
    name: |
      $ex "Cost" + " £(" + parseFloat(ys.at(-1)) + ")"
    type: pie
    hole: 0.6
    values: >-
      $ex [ 
      Number(hass.states["sensor.octopus_energy_electricity_current_accumulative_cost"].state).toFixed(2),
      Number(hass.states["sensor.ts_todays_electricity_fixed_export_compensation"].state).toFixed(2),
      ]
    labels:
      - Import Cost
      - Export Profit
    marker:
      colors:
        - red
        - green
    textinfo: value+percent
hours_to_show: 24
refresh_interval: auto
layout:
  margin:
    t: 10

type: custom:plotly-graph
title: Solar Generation
entities:
  - entity: sensor.lux_solar_output_daily
    showlegend: true
    name: |
      $ex "Cost" + " (" + parseFloat(ys.at(-1)) + ")watts"
    type: pie
    hole: 0.6
    values: |-
      $ex [ 
       Number(hass.states["sensor.lux_solar_output_daily"].state).toFixed(2),
       Number(hass.states["sensor.luxpower"].attributes.e_pv_2_day || 0).toFixed(2),
       Number(hass.states["sensor.luxpower"].attributes.e_pv_1_day || 0).toFixed(2)
       ]
    labels:
      - Total
      - Front
      - Back
    marker:
      colors:
        - green
        - darkviolet
        - slateblute
    textinfo: value
hours_to_show: 24
refresh_interval: auto
layout:
  margin:
    t: 10

Apex originals

[dbuezas]

What you put in name put it in a label.
To center the legend, see https://plotly.com/javascript/legend/ and https://plotly.com/javascript/reference/layout/#layout-legend

[bazcurtis]

Thanks. I did it on this one and it spot on. I just need to work on the label positioning. I was using

layout:
  margin:
    t: 10

but that didn't help. I will continue to try and sort that out. Thanks again.

type: custom:plotly-graph
title: Solar Generation
entities:
  - entity: sensor.lux_solar_output_daily
    showlegend: true
    name: |
      $ex "Cost" + " (" + parseFloat(ys.at(-1)) + ")watts"
    type: pie
    hole: 0.6
    values: |-
      $ex [ 
       Number(hass.states["sensor.lux_solar_output_daily"].state).toFixed(2),
       Number(hass.states["sensor.luxpower"].attributes.e_pv_2_day || 0).toFixed(2),
       Number(hass.states["sensor.luxpower"].attributes.e_pv_1_day || 0).toFixed(2)
       ]
    labels:
      - $ex "Cost" + " (" + parseFloat(ys.at(-1)) + " kWh)"
      - >-
        $ex "Front" + " (" +
        Number(hass.states["sensor.luxpower"].attributes.e_pv_2_day ||
        0).toFixed(2) + " kWh)"
      - >-
        $ex "Front" + " (" +
        Number(hass.states["sensor.luxpower"].attributes.e_pv_1_day ||
        0).toFixed(2) + " kWh)"
    marker:
      colors:
        - green
        - darkviolet
        - slateblute
    textinfo: value
hours_to_show: 24
refresh_interval: auto

[dbuezas]

Getting there!

[bazcurtis]

A bit more progress. The labels aren't quite a centred as I would like. I was also trying to pad the title to get it away from the pie chart a bit.

type: custom:plotly-graph
title: Daily Cost
entities:
  - entity: >-
      sensor.octopus_energy_electricity_current_accumulative_cost
    name: |
      $ex "Cost" + " £(" + parseFloat(ys.at(-1)) + ")"
    type: pie
    hole: 0.6
    values: >-
      $ex [ 
      Number(hass.states["sensor.octopus_energy_electricity_current_accumulative_cost"].state).toFixed(2),
      Number(hass.states["sensor.ts_todays_electricity_fixed_export_compensation"].state).toFixed(2),
      ]
    labels:
      - >-
        $ex "Import (£" +
        Number(hass.states["sensor.octopus_energy_electricity_current_accumulative_cost"].state).toFixed(2)
        + ")"
      - >-
        $ex "Export (£" +
        Number(hass.states["sensor.ts_todays_electricity_fixed_export_compensation"].state).toFixed(2)
        + ")"
    marker:
      colors:
        - red
        - green
    textinfo: value+percent
hours_to_show: 24
refresh_interval: auto
layout:
  showlegend: true
  legend:
    x: 1,
    y: -100
    xanchor: center
  margin:
    r: 50
  title:
   pad:
    b: 10

[hendrik001973]

Is it possible to just write the total vaule in the middle instead of drawing an extra half circle with total?

[dbuezas]

You could use an indicator instead https://plotly.com/javascript/indicator/