Combined tooltip for aggregated and non-aggregated data in chart

[tisoft (Markus Heberling)]

I have created the following chart, that combines some aggregated data (the bar charts) and some normal data (the line charts) in one diagram. It is working fine, except that the bar chart values do not appear in the tooltip. How can I get them in there?

config:
  chartType: day
  period: D
  label: PV Ertrag
  sidebar: true
slots:
  grid:
    - component: oh-chart-grid
      config:
        includeLabels: true
  xAxis:
    - component: oh-time-axis
      config:
        gridIndex: 0
        alignTicks: true
    - component: oh-category-axis
      config:
        gridIndex: 0
        categoryType: day
        weekdayFormat: default
        monthFormat: default
        alignTicks: true
  yAxis:
    - component: oh-value-axis
      config:
        gridIndex: 0
        name: W
        max: "20000"
        position: left
        alignTicks: true
        min: "-20000"
    - component: oh-value-axis
      config:
        gridIndex: 0
        name: W
        max: "20000"
        position: left
        alignTicks: true
        min: "-20000"
        inverse: true
        show: false
    - component: oh-value-axis
      config:
        gridIndex: 0
        max: "20"
        alignTicks: true
        min: "-20"
        name: kWh
    - component: oh-value-axis
      config:
        gridIndex: 0
        max: "20"
        show: false
        alignTicks: true
        min: "-20"
        inverse: true
    - component: oh-value-axis
      config:
        gridIndex: 0
        min: "0"
        max: "0.6"
        offset: 80
        alignTicks: true
        name: EUR
  series:
    - component: oh-time-series
      config:
        name: Power
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: line
        item: Kaco_Inverter_Power
        lineStyle:
          width: 1
    - component: oh-time-series
      config:
        name: String 1 Power
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: line
        item: Kaco_Inverter_String_1_Power
        stack: production
        areaStyle: {}
        lineStyle:
          width: 0
    - component: oh-time-series
      config:
        name: String 2 Power
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: line
        item: Kaco_Inverter_String_2_Power
        stack: production
        areaStyle: {}
        lineStyle:
          width: 0
    - component: oh-time-series
      config:
        name: Grid
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 1
        type: line
        item: Tibber_Pulse_powerTotal
        lineStyle:
          width: 1
    - component: oh-time-series
      config:
        name: Price
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 4
        type: line
        item: TibberAPI_CurrentTotalPrice
    - component: oh-aggregate-series
      config:
        name: Erzeugung
        gridIndex: 0
        xAxisIndex: 1
        yAxisIndex: 2
        type: bar
        item: Kaco_Inverter_Total_Export
        dimension1: hour
        aggregationFunction: diff_last
        barGap: -100%
        barCategoryGap: 80%
        label:
          show: true
          position: bottom
          offset:
            - 0
            - 20
        z: 4
    - component: oh-aggregate-series
      config:
        name: Eigenverbrauch
        gridIndex: 0
        type: bar
        item: energySelfConsumptionTotal
        aggregationFunction: diff_last
        dimension1: hour
        stack: consumption
        xAxisIndex: 1
        yAxisIndex: 2
        barGap: -100%
        barCategoryGap: 80%
        z: 4
    - component: oh-aggregate-series
      config:
        name: Einspeisung
        gridIndex: 0
        xAxisIndex: 1
        yAxisIndex: 2
        type: bar
        item: Tibber_Pulse_energyExportTotal
        dimension1: hour
        aggregationFunction: diff_last
        stack: consumption
        barGap: -100%
        barCategoryGap: 80%
        z: 4
    - component: oh-aggregate-series
      config:
        name: Bezug
        gridIndex: 0
        xAxisIndex: 1
        yAxisIndex: 3
        type: bar
        item: Tibber_Pulse_energyImportTotal
        dimension1: hour
        aggregationFunction: diff_last
        barGap: -100%
        barCategoryGap: 80%
        z: 4
  tooltip:
    - component: oh-chart-tooltip
      config:
        confine: true
        smartFormatter: true
        show: true
        trigger: axis
  legend:
    - component: oh-chart-legend
      config:
        bottom: 3
        type: scroll
  dataZoom:
    - component: oh-chart-datazoom
      config:
        type: inside
  toolbox:
    - component: oh-chart-toolbox
      config:
        show: true
        presetFeatures:
          - saveAsImage
          - dataView
          - dataZoom
        top: top
        left: left

[JustinG]

I haven’t done this sort of formatting before so I can’t say exactly. I’m not even 100% sure this is possible. But, the charts are based on apache echarts and you can find the docs for the tooltip formatter here:

Documentation - Apache ECharts

It is possible to send functions to the tooltip formatter as you can see in this example:

How to set label precission (decimal places) in a bar chart

IMHO this should work, at least in latest snapshots … formatter: =v=>v.toFixed(2) Did try only on a gauge, but probably should work for all … EDIT: syntax for bar is a bit different: label: show: true formatter: =v=>Number.parseFloat(v.data[1]).toFixed(1) this did the trick for me [Screenshot 2022-10-20 at 04.02.53] or with toFixed(3): [Screenshot 2022-10-20 at 04.05.27]

But whether or not you can append other data, I don’t know.

[ysc (Yannick Schaus)]

It’s quite awesome what you have achieved with those chart components but I don’t think what you ask is possible right now, but we never know:
there are a lot of options you can use: Documentation - Apache ECharts
most of them you can apply to the openHAB components!

[tisoft (Markus Heberling)]

Got it working!

Had to remove smartFormatter: true from the tooltip declaration.