Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Stacked 100% bar Graph for Multiple Entities #702

Open
3 tasks done
flautze opened this issue May 8, 2024 · 0 comments
Open
3 tasks done

Stacked 100% bar Graph for Multiple Entities #702

flautze opened this issue May 8, 2024 · 0 comments
Labels
feature-request New feature or request

Comments

@flautze
Copy link

flautze commented May 8, 2024

Checklist

  • I am running the latest version of the card
  • I checked if there isn't another feature request opened with the same request
  • I checked that the feature is not already available in the dev branch

Is your feature request related to a problem? Please describe.
I want to replicate this display/bar from my Huawei App in Homeassistant (focus on the bar with the % values /or actual values)
grafik
However I have not found any possibility.

Describe the solution you'd like
ApexCharts itself supports this feature. Its called 100% stacked bar.
https://apexcharts.com/javascript-chart-demos/bar-charts/stacked-100/

I would like to have the possibility to use this as simple bargraph that shows 2 or more entities and sizes the bars according to their percentage.

Describe alternatives you've considered
Alternative is Bar Card with Card-Mod (and Config-template-card), however I was not able to succeed so far.

Additional context
With Donut chart I was able to build something that resembles what I would want as bar.
I would love to be able to build this as bar - since on mobile devices the Donut takes up too much space.
grafik

type: custom:apexcharts-card
chart_type: donut
header:
  show: true
  title: Stromnutzung (heute)
  show_states: true
  colorize_states: true
apex_config:
  fill:
    type: gradient
  dataLabels:
    formatter: |
      EVAL:function(value) {
        return value.toFixed(0) + " %";
      }
  legend:
    show: false
  plotOptions:
    pie:
      startAngle: -180
      endAngle: 180
      donut:
        labels:
          show: true
          total:
            show: true
            label: Produktion
            formatter: |
              EVAL:function(w) {
                return w.globals.seriesTotals.reduce((a, b) => {return (a + b)} , 0).toFixed(1) + " kWh"
                }
series:
  - entity: sensor.home_selfuse_energy_daily
    name: Eigenverbrauch
    float_precision: 1
    color: darkgreen
  - entity: sensor.grid_export_energy_daily
    name: Einspeisung
    float_precision: 1
    color: lightgreen

@flautze flautze added the feature-request New feature or request label May 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature-request New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant