OH3 charts - how to stack values?

Hi,
I am failing to build a chart that stacks the lines (or areas) from two items.
Based on the ECharts documentation, stack: "<NAME>" in the config of both oh-time-series should do the trick, but I cannot get it to work.

Can someone please post an example for stacking values?

Also: information on charts in OH3 is quite limited. Would it make sense to have a thread or even a subtopic dedicated to collecting examples of chart-pages or chart-widgets?
Cheers, Bastian

This feature is available under the toolbar options.

Hi @Tuny,
thanks for the quick answer. It’s cool to see that stacking is possible at all, but I need to be able to preconfigure stacking for just some of the data-series displayed in the chart.
So what I’m searching for, is a way to set stacking in the chart-yaml.

Maybe it’s helpful to explain why I want this:
I am building a widget to to show the temperature/heating of a room over time as a chart.
The chart contains:

  • actual temperature of the room as a line
  • set temperature of the radiators in the room as a line (I learned that I have to display this as steps)
  • valve-setting for up to three radiators as an area - the valve setting (0% closed / 100% fully open) gives an indication of the energy used

As I have three radiators, I want to “sum up” the valve settings for them, by showing these three items all stacked onto one another.
An alternative would be to use a group-item that sums up the three valve-settings, but this has the disadvantage of hiding the individual valve-settings. The thermostat on each radiator determines the valve setting independeltly from one another, and hence it would be helpful to see these individual value.
Cheers, Bastian

I don’t know if it can help you, but I made this graph to stack by default the consumption of each plant

config:
  chartType: day
  label: Energia dia
slots:
  grid:
    - component: oh-chart-grid
      config: {}
  xAxis:
    - component: oh-category-axis
      config:
        gridIndex: 0
        categoryType: day
        weekdayFormat: default
        monthFormat: default
  yAxis:
    - component: oh-value-axis
      config:
        gridIndex: 0
        name: Energia (Wh)
  series:
    - component: oh-aggregate-series
      config:
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: bar
        name: Energia Baixos
        dimension1: hour
        item: EnerParcial_Baixos
        stack: one
    - component: oh-aggregate-series
      config:
        name: Energia 1r pis
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: bar
        item: EnerParcial_1r
        dimension1: hour
        stack: one
    - component: oh-aggregate-series
      config:
        name: Energia 2n
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: bar
        item: EnerParcial_2n
        dimension1: hour
        stack: one
  tooltip:
    - component: oh-chart-tooltip
      config:
        show: true
        orient: vertical
  legend:
    - component: oh-chart-legend
      config:
        show: true
        orient: horizontal
  title:
    - component: oh-chart-title
      config:
        show: true
        text: Energia dia
  toolbox:
    - component: oh-chart-toolbox
      config:
        show: true
        presetFeatures:
          - saveAsImage
        left: "15"
        bottom: "0"

1 Like

Hi afajula,

thanks a lot. Exactly what I was searching for. I adapted it to a monthly view:

config:
  chartType: month
  label: PV Tagesanalyse
  sidebar: true
slots:
  grid:
    - component: oh-chart-grid
      config: {}
  xAxis:
    - component: oh-category-axis
      config:
        gridIndex: 0
        categoryType: month
        weekdayFormat: default
        monthFormat: default
  yAxis:
    - component: oh-value-axis
      config:
        gridIndex: 0
        name: kWh
  series:
    - component: oh-aggregate-series
      config:
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: bar
        name: PV Tagesproduktion
        dimension1: date
        item: PV_Tagesproduktion_Historie
        stack: one
    - component: oh-aggregate-series
      config:
        name: PV Eigenverbrauch
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: bar
        item: PV_Eigemverbrauch_heute
        dimension1: date
        stack: one
  tooltip:
    - component: oh-chart-tooltip
      config:
        show: true
        orient: vertical
  legend:
    - component: oh-chart-legend
      config:
        show: true
        orient: horizontal
  title:
    - component: oh-chart-title
      config:
        show: true
        text: PV Tageswerte
  toolbox:
    - component: oh-chart-toolbox
      config:
        show: true
        presetFeatures:
          - saveAsImage
        left: "15"
        bottom: "0"