Horizontal bar chart for energy expenditure of appliances

[Matthew1988 (Matthias)]

Hi all,

i am currently working on a widget to show energy expenditure by different appliances. Currently I managed to do a stacked bar chart, which is nice, but I would rather have a horizontal bar chart. Please see attached the current screenshot. What I would like to achieve is similar to the Home Assistant bar chart (screenshot 2).
Anyone knows how to get to that result?
Thank you very much!

Here is the code 'til now:

uid: energy_graph_mu
tags: []
props:
  parameters:
    - description: A text prop
      label: Prop 1
      name: prop1
      required: false
      type: TEXT
    - context: item
      description: An item to control
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Nov 16, 2023, 9:31:44 PM
component: oh-chart
config:
  chartType: month
  label: PV
  sidebar: true
slots:
  grid:
    - component: oh-chart-grid
      config: {}
  legend:
    - component: oh-chart-legend
      config:
        bottom: -25px
        orient: horizontal
        show: true
  series:
    - component: oh-aggregate-series
      config:
        aggregationFunction: max
        dimension1: date
        gridIndex: 0
        item: Server_kWh_heute
        name: Server
        stack: one
        type: bar
        xAxisIndex: 0
        yAxisIndex: 0
    - component: oh-aggregate-series
      config:
        aggregationFunction: max
        dimension1: date
        gridIndex: 0
        item: IDM_kwh_heute
        name: Pompa calore
        stack: one
        type: bar
        xAxisIndex: 0
        yAxisIndex: 0
    - component: oh-aggregate-series
      config:
        aggregationFunction: max
        dimension1: date
        gridIndex: 0
        item: TV_plug_onsumption_heute_kwh
        name: TV+OH
        stack: one
        type: bar
        xAxisIndex: 0
        yAxisIndex: 0
    - component: oh-aggregate-series
      config:
        aggregationFunction: max
        dimension1: date
        gridIndex: 0
        item: Lavatrice_kwh_heute
        name: Lavatrice
        stack: one
        type: bar
        xAxisIndex: 0
        yAxisIndex: 0
    - component: oh-aggregate-series
      config:
        aggregationFunction: max
        dimension1: date
        gridIndex: 0
        item: Lavastoviglie_kWh_heute
        name: Lavastoviglie
        stack: one
        type: bar
        xAxisIndex: 0
        yAxisIndex: 0
    - component: oh-aggregate-series
      config:
        aggregationFunction: max
        dimension1: date
        gridIndex: 0
        item: Gartenpumpe_kWh_heute
        name: Gartenpumpe
        stack: one
        type: bar
        xAxisIndex: 0
        yAxisIndex: 0
    - component: oh-aggregate-series
      config:
        aggregationFunction: max
        dimension1: date
        gridIndex: 0
        item: Plug_Frigo__Forno_Frigo_forno_heute_kwh
        name: Frigo & Forno
        stack: one
        type: bar
        xAxisIndex: 0
        yAxisIndex: 0
  title:
    - component: oh-chart-title
      config:
        show: true
  tooltip:
    - component: oh-chart-tooltip
      config:
        orient: vertical
        show: true
  xAxis:
    - component: oh-category-axis
      config:
        categoryType: month
        gridIndex: 0
        monthFormat: default
        weekdayFormat: default
  yAxis:
    - component: oh-value-axis
      config:
        gridIndex: 0
        name: kWh

Screenshot actual state:

Screenshot of what I would like to achieve:

[STSC]

Did you find a way to have horizontal bar chart?

[Matthew1988 (Matthias)]

No, unfortunately….

[STSC]

I think it is possible.

Examples - Apache ECharts

In this example yAxis and xAxis are changed.

[STSC]

Something like this is possible:

But we do not want to have every day of a month, but a sum of all days.
This is the current definition of the yAxis

  yAxis:
    - component: oh-category-axis
      config:
        gridIndex: 0
        categoryType: month
        monthFormat: short
        weekdayFormat: short

We need something like a categoryType: label
Checking the manual this seems not to be available.

oh-category-axis - Category Axis

Does anybody have an idea how to workaround it?