[OH3] oh-chart Legend color doesn't match line color

Add-ons UIs
,
1

On openHAB 3.1.0.M3, I’m still fiddling around with the new oh_chart component, which is actually working fine so far.
I now see that the line color of a time series doesn’t match the color shown in the legend. I set the color manually.

grafik
grafik1694×754 158 KB

So, the green line actually belongs to the green line, but shows blue in the legend.

component: f7-card
config:
  title: Temperaturen
  style:
    background-color: rgba(6,25,36)
    border-radius: 20px
    height: 360px
    --text-color: rgba(255,255,255,1)
    --font-size: 16px
    --line-height: 20px
    color: var(--text-color)
slots:
  default:
    - component: oh-chart
      config:
        period: M
        options:
          backgroundColor: rgb(6,25,36)
      slots:
        grid:
          - component: oh-chart-grid
            config: {}
        xAxis:
          - component: oh-time-axis
            config:
              gridIndex: 0
        yAxis:
          - component: oh-value-axis
            config:
              gridIndex: 0
        series:
          - component: oh-time-series
            config:
              name: Schlafzimmer
              gridIndex: 0
              xAxisIndex: 0
              yAxisIndex: 0
              type: line
              item: Thermo_Schlafzimmer_Temperatur
              lineStyle:
                color: rgb(86,165,75)
          - component: oh-time-series
            config:
              name: Wohnzimmer
              gridIndex: 0
              xAxisIndex: 0
              yAxisIndex: 0
              type: line
              item: Thermo_Wohnzimmer_Temperatur
              lineStyle:
                color: rgb(224,47,68)
          - component: oh-time-series
            config:
              name: Garten
              gridIndex: 0
              xAxisIndex: 0
              yAxisIndex: 0
              type: line
              item: Thermo_Garten_Temperatur
              lineStyle:
                color: rgb(30,94,192)
        legend:
          - component: oh-chart-legend
            config:
              show: true
              orient: horizontal
              bottom: "8"
              textStyle:
                color: "#FFFFFF"
              icon: circle

Anyone an idea how to match it again?
I haven’t found anything in the documentation of eCharts.

2

https://echarts.apache.org/en/option.html#color

With this option you can specify the series colors sequentially, specify it at the root level in the options parameter of your oh-chart or oh-chart-page:

config:
  options:
    color: ['blue', 'green', '#ffff00']

Then no need to specify the colors explicitely in the series and legends, they will use the colors from that list in order.

3

Works perfectly, thank you!

4

In my mind this is not a solution for the error (which also exists in OH4.0.3) but a workaround. Is there a plan to fix it?

I tried the specified workaround in OH 4.0.3 it does not work. Here’s the code I used:

config:
  label: Strom-Erzeugung
  options:
    color:
      - black
      - blue
      - red
      - yellow
  sidebar: true

The chart display seems to ignore my setting (even after a restart of openhab):

grafik
grafik950×633 55.6 KB

Here the complete code:

config:
  label: Strom-Erzeugung
  options:
    color:
      - black
      - blue
      - red
      - yellow
  sidebar: true
slots:
  dataZoom:
    - component: oh-chart-datazoom
      config:
        show: true
        type: slider
  grid:
    - component: oh-chart-grid
      config: {}
  legend:
    - component: oh-chart-legend
      config:
        orient: horizontal
        show: true
  series:
    - component: oh-time-series
      config:
        gridIndex: 0
        item: It_Abstellraum_Wechselrichter_ActivePowerWatt
        name: Garage
        type: line
        xAxisIndex: 0
        yAxisIndex: 0
    - component: oh-time-series
      config:
        gridIndex: 0
        item: It_Pavillon_Wechselrichter_Relais_Leistung
        name: Pavillon
        type: line
        xAxisIndex: 0
        yAxisIndex: 0
    - component: oh-time-series
      config:
        gridIndex: 0
        item: It_Balkon_Wechselrichter_Relais_Leistung
        name: Balkon
        type: line
        xAxisIndex: 0
        yAxisIndex: 0
    - component: oh-time-series
      config:
        gridIndex: 0
        item: It_EVCC_Installation_Solar_Leistung
        name: Gesamt-Erzeugung
        type: line
        xAxisIndex: 0
        yAxisIndex: 0
  tooltip:
    - component: oh-chart-tooltip
      config:
        show: true
  visualMap:
    - component: oh-chart-visualmap
      config:
        show: false
  xAxis:
    - component: oh-time-axis
      config:
        gridIndex: 0
  yAxis:
    - component: oh-value-axis
      config:
        gridIndex: 0