Multicolor chart line

Setup, Configuration and Use Widgets
1

Does anyone know how to create a multicolored chart line? i.e. color of a section depends on the y range the value is in.
Like for a temperature curve that starts violet-blue below/at zero and gets green-yellow-orange-red when it’s getting warmer.
I read Apache eCharts supports it but cannot get it to work yet.

Alternatively, a bar type chart with differently colored bars?

2

I did it like this:

config:
  label: Tellers
  period: D
  sidebar: true
slots:
  dataZoom: []
  grid:
    - component: oh-chart-grid
      config:
        containLabel: false
        show: true
  legend:
    - component: oh-chart-legend
      config:
        show: true
        top: bottom
  series:
    - component: oh-time-series
      config:
        color: "#56a653"
        gridIndex: 0
        item: Dak_Inverter_Deye1_Deye1_voltage
        name: Deye1 AC Voltage
        type: line
        xAxisIndex: 0
        yAxisIndex: 5
  visualMap:
    - component: oh-chart-visualmap
      config:
        pieces:
          - color: transparent
            lt: 200
          - color: "#f58c8c"
            ge: 200
            lt: 207
          - color: "#f5d68c"
            ge: 207
            lt: 220
          - color: "#56a653"
            ge: 220
            lt: 240
          - color: "#f5d68c"
            ge: 240
            lt: 253
          - color: "#f58c8c"
            ge: 253
        seriesIndex: 0
        show: false
3

didn’t work for me.
Where’s the link from the visual map to the item’s chart line?
I have several lines and don’t want this to apply to all of them, obviously.

4

I have not tested it, but “seriesIndex: 0” should define first line in chart.

Output from AI:

slots:
  visualMap:
    - component: oh-chart-visualmap
      config:
        type: continuous
        orient: vertical
        right: 10
        top: center
        min: -10
        max: 30
        calculable: true
        # IMPORTANT: 0 corresponds to the first series (e.g. outside temperature)
        seriesIndex: 0
        inRange:
          color:
            - "#313695" # Kalt (Blau)
            - "#4575b4"
            - "#abd9e9"
            - "#ffffbf" # Mild (Gelb)
            - "#fdae61"
            - "#f46d43"
            - "#d73027" # Warm (Rot)

. . .or if you want to define the range:

visualMap:
    - component: oh-chart-visualmap
      config:
        type: piecewise
        orient: vertical
        right: 10
        top: center
        seriesIndex: 0
        # Here you can define your own areas:
        pieces:
          - lt: 0
            color: "#0000FF"
            label: Frost (unter 0°C)
          - gte: 0
            lt: 15
            color: "#00BFFF"
            label: Kühl (0-15°C)
          - gte: 15
            lt: 25
            color: "#FFA500"
            label: Angenehm (15-25°C)
          - gte: 25
            color: "#FF0000"
            label: Heiß (über 25°C)

I can test this later today.

5

Later today = Now :joy:

For me it works (openHAB 5.1.1)

image
image1560×750 60.3 KB

Or with own ranges:

image
image1522×745 67.9 KB

6

that worked once I used seriesIndex to apply to my temp line
very cool, thanks both of you.

PS: how to get the range legend over to the left?

7 
    orient: vertical
    right: 10
    top: center
1 Like