MainUI: Tibber price chart Widget

[_DanielSan (Daniel K.)]

In needed of a chart that shows todays and tomorrows hourly prices gathered through the Tibber Binding i created this widget for the MainUI.

You only need these three channels of the tibber thing linked to corresponding items. No transformations etc. needed. To see “Prices for today” and “Prices for tomorrow” you need to tick on “Show advanced”

The chart will also work if you only supply one JSON. Horizontal lines will be shortened and tomorrows 6,12,18,24 will get visible set to false.

Currently the y-axis only shows a fixed price range from 0 to 40 cents; i plan on making the range dynamic to be able to show extreme low and high prices when necessary.

Screenshots

Only todays prices without spacing of the bars

Today and tomorrow without spacing and current hour indication
Default colors work best on dark profile and can be changed in “Configure Widget” dialog

Changelog

Version 0.1

• initial release

Resources

uid: tibber2DayChart
tags:
  - tibber
  - chart
props:
  parameters:
    - context: item
      label: JSON of todays prices
      name: jsonPricesToday
      required: false
      type: TEXT
    - context: item
      label: JSON of tomorrows prices
      name: jsonPricesTomorrow
      required: false
      type: TEXT
    - context: item
      label: Timestamp for measurement (empty for no highlighting)
      name: dtMeasurement
      required: false
      type: TEXT
    - label: graph color (default rgba(35, 184, 204, 0.55))
      name: graph_background
      required: false
      type: TEXT
    - label: graph color for current hour (default rgba(35, 184, 204, 0.9))
      name: graph_background_now
      required: false
      type: TEXT
    - label: graph x-axis text color (default= lightgrey)
      name: graph_x_axis_text_color
      required: false
      type: TEXT
    - label: graph y-axis text color (default= lightgrey)
      name: graph_y_axis_text_color
      required: false
      type: TEXT
    - label: graph axis line color (default= grey)
      name: graph_axis_line_color
      required: false
      type: TEXT
    - label: graph spacing between hourbars (default= 0)
      name: graph_spacing
      required: false
  parameterGroups: []
timestamp: Feb 20, 2024, 5:16:37 PM
component: oh-repeater
config:
  for: coords
  fragment: true
  in:
    - graph_axis_line_color: =props.graph_axis_line_color?props.graph_axis_line_color :'grey'
      graph_background: =props.graph_background?props.graph_background:'rgba(35, 184, 204, 0.55)'
      graph_background_now: =props.graph_background_now?props.graph_background_now:'rgba(35, 184, 204, 0.90)'
      graph_spacing: =props.graph_spacing?props.graph_spacing:0
      graph_x_axis_text_color: =props.graph_x_axis_text_color?props.graph_x_axis_text_color :'lightgrey'
      graph_y_axis_text_color: =props.graph_y_axis_text_color?props.graph_y_axis_text_color :'lightgrey'
      p0: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[0].total)) * 450
      p1: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[1].total)) * 450
      p2: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[2].total)) * 450
      p3: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[3].total)) * 450
      p4: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[4].total)) * 450
      p5: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[5].total)) * 450
      p6: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[6].total)) * 450
      p7: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[7].total)) * 450
      p8: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[8].total)) * 450
      p9: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[9].total)) * 450
      p10: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[10].total)) * 450
      p11: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[11].total)) * 450
      p12: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[12].total)) * 450
      p13: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[13].total)) * 450
      p14: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[14].total)) * 450
      p15: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[15].total)) * 450
      p16: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[16].total)) * 450
      p17: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[17].total)) * 450
      p18: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[18].total)) * 450
      p19: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[19].total)) * 450
      p20: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[20].total)) * 450
      p21: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[21].total)) * 450
      p22: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[22].total)) * 450
      p23: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[23].total)) * 450
      p24: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[0].total)) * 450
      p25: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[1].total)) * 450
      p26: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[2].total)) * 450
      p27: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[3].total)) * 450
      p28: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[4].total)) * 450
      p29: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[5].total)) * 450
      p30: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[6].total)) * 450
      p31: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[7].total)) * 450
      p32: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[8].total)) * 450
      p33: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[9].total)) * 450
      p34: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[10].total)) * 450
      p35: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[11].total)) * 450
      p36: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[12].total)) * 450
      p37: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[13].total)) * 450
      p38: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[14].total)) * 450
      p39: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[15].total)) * 450
      p40: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[16].total)) * 450
      p41: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[17].total)) * 450
      p42: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[18].total)) * 450
      p43: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[19].total)) * 450
      p44: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[20].total)) * 450
      p45: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[21].total)) * 450
      p46: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[22].total)) * 450
      p47: =200 - (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[23].total)) * 450
  sourceType: array
slots:
  default:
    - component: f7-card
      config:
        style:
          height: 235px
      slots:
        default:
          - component: f7-block
            config:
              style:
                display: flex
                flex-direction: column
                left: -10px
                position: absolute
                top: -5px
            slots:
              default:
                - component: Label
                  config:
                    style:
                      color: =`${loop.coords.graph_y_axis_text_color}`
                      font-size: 12px
                      margin-top: 0px
                    text: 40
                - component: Label
                  config:
                    style:
                      color: =`${loop.coords.graph_y_axis_text_color}`
                      font-size: 12px
                      margin-top: 25px
                    text: 30
                - component: Label
                  config:
                    style:
                      color: =`${loop.coords.graph_y_axis_text_color}`
                      font-size: 12px
                      margin-top: 25px
                    text: 20
                - component: Label
                  config:
                    style:
                      color: =`${loop.coords.graph_y_axis_text_color}`
                      font-size: 12px
                      margin-top: 25px
                    text: 10
                - component: Label
                  config:
                    style:
                      color: =`${loop.coords.graph_y_axis_text_color}`
                      font-size: 12px
                      margin-top: 25px
                    text: 0
                - component: f7-block
                  config:
                    style:
                      display: flex
                      flex-direction: row
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            color: =`${loop.coords.graph_x_axis_text_color}`
                            font-size: 12px
                            margin-left: 5px
                          text: 0
                      - component: Label
                        config:
                          style:
                            color: =`${loop.coords.graph_x_axis_text_color}`
                            font-size: 12px
                            margin-left: 53px
                          text: 6
                      - component: Label
                        config:
                          style:
                            color: =`${loop.coords.graph_x_axis_text_color}`
                            font-size: 12px
                            margin-left: 50px
                          text: 12
                      - component: Label
                        config:
                          style:
                            color: =`${loop.coords.graph_x_axis_text_color}`
                            font-size: 12px
                            margin-left: 50px
                          text: 18
                      - component: Label
                        config:
                          style:
                            color: =`${loop.coords.graph_x_axis_text_color}`
                            font-size: 12px
                            margin-left: 48px
                          text: 24
                      - component: Label
                        config:
                          style:
                            color: =`${loop.coords.graph_x_axis_text_color}`
                            font-size: 12px
                            margin-left: 50px
                          visible: =props.jsonPricesTomorrow ? true:false
                          text: 6
                      - component: Label
                        config:
                          style:
                            color: =`${loop.coords.graph_x_axis_text_color}`
                            font-size: 12px
                            margin-left: 50px
                          visible: =props.jsonPricesTomorrow ? true:false
                          text: 12
                      - component: Label
                        config:
                          style:
                            color: =`${loop.coords.graph_x_axis_text_color}`
                            font-size: 12px
                            margin-left: 50px
                          visible: =props.jsonPricesTomorrow ? true:false
                          text: 18
                      - component: Label
                        config:
                          style:
                            color: =`${loop.coords.graph_x_axis_text_color}`
                            font-size: 12px
                            margin-left: 48px
                          visible: =props.jsonPricesTomorrow ? true:false
                          text: 24
          - component: svg
            config:
              height: 100%
              width: 100%
            slots:
              default:
                - component: polygon
                  config:
                    fill: =loop.coords.graph_axis_line_color
                    points: =`30,19 30,21 ${props.jsonPricesTomorrow?"510":"270"},21 ${props.jsonPricesTomorrow?"510":"270"},19`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_axis_line_color
                    points: =`30,64 30,66 ${props.jsonPricesTomorrow?"510":"270"},66 ${props.jsonPricesTomorrow?"510":"270"},64`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_axis_line_color
                    points: =`30,109 30,111 ${props.jsonPricesTomorrow?"510":"270"},111 ${props.jsonPricesTomorrow?"510":"270"},109`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_axis_line_color
                    points: =`30,154 30,156 ${props.jsonPricesTomorrow?"510":"270"},156 ${props.jsonPricesTomorrow?"510":"270"},154`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_axis_line_color
                    points: =`30,198 30,200 ${props.jsonPricesTomorrow?"510":"270"},200 ${props.jsonPricesTomorrow?"510":"270"},198`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('HH')=="0"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`40,${loop.coords.p0} 30,${loop.coords.p0} 30,200 ${40-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="1"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`50,${loop.coords.p1} 40,${loop.coords.p1} 40,200 ${50-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="2"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`60,${loop.coords.p2} 50,${loop.coords.p2} 50,200 ${60-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="3"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`70,${loop.coords.p3} 60,${loop.coords.p3} 60,200 ${70-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="4"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`80,${loop.coords.p4} 70,${loop.coords.p4} 70,200 ${80-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="5"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`90,${loop.coords.p5} 80,${loop.coords.p5} 80,200 ${90-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="6"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`100,${loop.coords.p6} 90,${loop.coords.p6} 90,200 ${100-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="7"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`110,${loop.coords.p7} 100,${loop.coords.p7} 100,200 ${110-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="8"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`120,${loop.coords.p8} 110,${loop.coords.p8} 110,200 ${120-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="9"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`130,${loop.coords.p9} 120,${loop.coords.p9} 120,200 ${130-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="10"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`140,${loop.coords.p10} 130,${loop.coords.p10} 130,200 ${140-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="11"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`150,${loop.coords.p11} 140,${loop.coords.p11} 140,200 ${150-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="12"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`160,${loop.coords.p12} 150,${loop.coords.p12} 150,200 ${160-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="13"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`170,${loop.coords.p13} 160,${loop.coords.p13} 160,200 ${170-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="14"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`180,${loop.coords.p14} 170,${loop.coords.p14} 170,200 ${180-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="15"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`190,${loop.coords.p15} 180,${loop.coords.p15} 180,200 ${190-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="16"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`200,${loop.coords.p16} 190,${loop.coords.p16} 190,200 ${200-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="17"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`210,${loop.coords.p17} 200,${loop.coords.p17} 200,200 ${210-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="18"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`220,${loop.coords.p18} 210,${loop.coords.p18} 210,200 ${220-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="19"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`230,${loop.coords.p19} 220,${loop.coords.p19} 220,200 ${230-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="20"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`240,${loop.coords.p20} 230,${loop.coords.p20} 230,200 ${240-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="21"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`250,${loop.coords.p21} 240,${loop.coords.p21} 240,200 ${250-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="22"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`260,${loop.coords.p22} 250,${loop.coords.p22} 250,200 ${260-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="23"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`270,${loop.coords.p23} 260,${loop.coords.p23} 260,200 ${270-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`280,${loop.coords.p24} 270,${loop.coords.p24} 270,200 ${280-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`290,${loop.coords.p25} 280,${loop.coords.p25} 280,200 ${290-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`300,${loop.coords.p26} 290,${loop.coords.p26} 290,200 ${300-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`310,${loop.coords.p27} 300,${loop.coords.p27} 300,200 ${310-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`320,${loop.coords.p28} 310,${loop.coords.p28} 310,200 ${320-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`330,${loop.coords.p29} 320,${loop.coords.p29} 320,200 ${330-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`340,${loop.coords.p30} 330,${loop.coords.p30} 330,200 ${340-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`350,${loop.coords.p31} 340,${loop.coords.p31} 340,200 ${350-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`360,${loop.coords.p32} 350,${loop.coords.p32} 350,200 ${360-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`370,${loop.coords.p33} 360,${loop.coords.p33} 360,200 ${370-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`380,${loop.coords.p34} 370,${loop.coords.p34} 370,200 ${380-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`390,${loop.coords.p35} 380,${loop.coords.p35} 380,200 ${390-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`400,${loop.coords.p36} 390,${loop.coords.p36} 390,200 ${400-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`410,${loop.coords.p37} 400,${loop.coords.p37} 400,200 ${410-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`420,${loop.coords.p38} 410,${loop.coords.p38} 410,200 ${420-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`430,${loop.coords.p39} 420,${loop.coords.p39} 420,200 ${430-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`440,${loop.coords.p40} 430,${loop.coords.p40} 430,200 ${440-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`450,${loop.coords.p41} 440,${loop.coords.p41} 440,200 ${450-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`460,${loop.coords.p42} 450,${loop.coords.p42} 450,200 ${460-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`470,${loop.coords.p43} 460,${loop.coords.p43} 460,200 ${470-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`480,${loop.coords.p44} 470,${loop.coords.p44} 470,200 ${480-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`490,${loop.coords.p45} 480,${loop.coords.p45} 480,200 ${490-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`500,${loop.coords.p46} 490,${loop.coords.p46} 490,200 ${500-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`510,${loop.coords.p47} 500,${loop.coords.p47} 500,200 ${510-loop.coords.graph_spacing},200`

[mxkr303]

Thanks for sharing this! Awesome.
I would love to see a dynamic y-axis!

[_DanielSan (Daniel K.)]

I am glad you like the Widget.
Unfortunately i am no longer a tibber customer and thus have no access to the data to further refine the code.

Maybe in the future i will get back at it.

[mxkr303]

I just changed the code to display prices up to 60 cent/kwh.
I just changed the Scale factor of the polygons from 450 to 300 and changed the lables on the graph.

uid: tibber2DayChart60cent
tags:
  - tibber
  - chart
props:
  parameters:
    - context: item
      label: JSON of todays prices
      name: jsonPricesToday
      required: false
      type: TEXT
    - context: item
      label: JSON of tomorrows prices
      name: jsonPricesTomorrow
      required: false
      type: TEXT
    - context: item
      label: Timestamp for measurement (empty for no highlighting)
      name: dtMeasurement
      required: false
      type: TEXT
    - label: graph color (default rgba(35, 184, 204, 0.55))
      name: graph_background
      required: false
      type: TEXT
    - label: graph color for current hour (default rgba(35, 184, 204, 0.9))
      name: graph_background_now
      required: false
      type: TEXT
    - label: graph x-axis text color (default= lightgrey)
      name: graph_x_axis_text_color
      required: false
      type: TEXT
    - label: graph y-axis text color (default= lightgrey)
      name: graph_y_axis_text_color
      required: false
      type: TEXT
    - label: graph axis line color (default= grey)
      name: graph_axis_line_color
      required: false
      type: TEXT
    - label: graph spacing between hourbars (default= 0)
      name: graph_spacing
      required: false
  parameterGroups: []
timestamp: Jan 17, 2025, 11:48:40 AM
component: oh-repeater
config:
  for: coords
  fragment: true
  in:
    - graph_axis_line_color: =props.graph_axis_line_color?props.graph_axis_line_color :'grey'
      graph_background: =props.graph_background?props.graph_background:'rgba(35, 184, 204, 0.55)'
      graph_background_now: =props.graph_background_now?props.graph_background_now:'rgba(35,
        184, 204, 0.90)'
      graph_spacing: =props.graph_spacing?props.graph_spacing:0
      graph_x_axis_text_color: =props.graph_x_axis_text_color?props.graph_x_axis_text_color :'lightgrey'
      graph_y_axis_text_color: =props.graph_y_axis_text_color?props.graph_y_axis_text_color :'lightgrey'
      p0: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[0].total))
        * 300
      p1: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[1].total))
        * 300
      p2: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[2].total))
        * 300
      p3: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[3].total))
        * 300
      p4: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[4].total))
        * 300
      p5: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[5].total))
        * 300
      p6: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[6].total))
        * 300
      p7: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[7].total))
        * 300
      p8: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[8].total))
        * 300
      p9: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[9].total))
        * 300
      p10: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[10].total))
        * 300
      p11: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[11].total))
        * 300
      p12: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[12].total))
        * 300
      p13: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[13].total))
        * 300
      p14: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[14].total))
        * 300
      p15: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[15].total))
        * 300
      p16: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[16].total))
        * 300
      p17: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[17].total))
        * 300
      p18: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[18].total))
        * 300
      p19: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[19].total))
        * 300
      p20: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[20].total))
        * 300
      p21: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[21].total))
        * 300
      p22: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[22].total))
        * 300
      p23: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[23].total))
        * 300
      p24: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[0].total))
        * 300
      p25: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[1].total))
        * 300
      p26: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[2].total))
        * 300
      p27: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[3].total))
        * 300
      p28: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[4].total))
        * 300
      p29: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[5].total))
        * 300
      p30: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[6].total))
        * 300
      p31: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[7].total))
        * 300
      p32: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[8].total))
        * 300
      p33: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[9].total))
        * 300
      p34: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[10].total))
        * 300
      p35: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[11].total))
        * 300
      p36: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[12].total))
        * 300
      p37: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[13].total))
        * 300
      p38: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[14].total))
        * 300
      p39: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[15].total))
        * 300
      p40: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[16].total))
        * 300
      p41: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[17].total))
        * 300
      p42: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[18].total))
        * 300
      p43: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[19].total))
        * 300
      p44: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[20].total))
        * 300
      p45: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[21].total))
        * 300
      p46: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[22].total))
        * 300
      p47: =200 -
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[23].total))
        * 300
  sourceType: array
slots:
  default:
    - component: f7-card
      config:
        style:
          height: 235px
      slots:
        default:
          - component: f7-block
            config:
              style:
                display: flex
                flex-direction: column
                left: -10px
                position: absolute
                top: -5px
            slots:
              default:
                - component: Label
                  config:
                    style:
                      color: =`${loop.coords.graph_y_axis_text_color}`
                      font-size: 12px
                      margin-top: 0px
                    text: 60
                - component: Label
                  config:
                    style:
                      color: =`${loop.coords.graph_y_axis_text_color}`
                      font-size: 12px
                      margin-top: 25px
                    text: 45
                - component: Label
                  config:
                    style:
                      color: =`${loop.coords.graph_y_axis_text_color}`
                      font-size: 12px
                      margin-top: 25px
                    text: 30
                - component: Label
                  config:
                    style:
                      color: =`${loop.coords.graph_y_axis_text_color}`
                      font-size: 12px
                      margin-top: 25px
                    text: 15
                - component: Label
                  config:
                    style:
                      color: =`${loop.coords.graph_y_axis_text_color}`
                      font-size: 12px
                      margin-top: 25px
                    text: 0
                - component: f7-block
                  config:
                    style:
                      display: flex
                      flex-direction: row
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            color: =`${loop.coords.graph_x_axis_text_color}`
                            font-size: 12px
                            margin-left: 5px
                          text: 0
                      - component: Label
                        config:
                          style:
                            color: =`${loop.coords.graph_x_axis_text_color}`
                            font-size: 12px
                            margin-left: 53px
                          text: 6
                      - component: Label
                        config:
                          style:
                            color: =`${loop.coords.graph_x_axis_text_color}`
                            font-size: 12px
                            margin-left: 50px
                          text: 12
                      - component: Label
                        config:
                          style:
                            color: =`${loop.coords.graph_x_axis_text_color}`
                            font-size: 12px
                            margin-left: 50px
                          text: 18
                      - component: Label
                        config:
                          style:
                            color: =`${loop.coords.graph_x_axis_text_color}`
                            font-size: 12px
                            margin-left: 48px
                          text: 24
                      - component: Label
                        config:
                          style:
                            color: =`${loop.coords.graph_x_axis_text_color}`
                            font-size: 12px
                            margin-left: 50px
                          visible: =props.jsonPricesTomorrow ? true:false
                          text: 6
                      - component: Label
                        config:
                          style:
                            color: =`${loop.coords.graph_x_axis_text_color}`
                            font-size: 12px
                            margin-left: 50px
                          visible: =props.jsonPricesTomorrow ? true:false
                          text: 12
                      - component: Label
                        config:
                          style:
                            color: =`${loop.coords.graph_x_axis_text_color}`
                            font-size: 12px
                            margin-left: 50px
                          visible: =props.jsonPricesTomorrow ? true:false
                          text: 18
                      - component: Label
                        config:
                          style:
                            color: =`${loop.coords.graph_x_axis_text_color}`
                            font-size: 12px
                            margin-left: 48px
                          visible: =props.jsonPricesTomorrow ? true:false
                          text: 24
          - component: svg
            config:
              height: 100%
              width: 100%
            slots:
              default:
                - component: polygon
                  config:
                    fill: =loop.coords.graph_axis_line_color
                    points: =`30,19 30,21 ${props.jsonPricesTomorrow?"510":"270"},21
                      ${props.jsonPricesTomorrow?"510":"270"},19`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_axis_line_color
                    points: =`30,64 30,66 ${props.jsonPricesTomorrow?"510":"270"},66
                      ${props.jsonPricesTomorrow?"510":"270"},64`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_axis_line_color
                    points: =`30,109 30,111 ${props.jsonPricesTomorrow?"510":"270"},111
                      ${props.jsonPricesTomorrow?"510":"270"},109`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_axis_line_color
                    points: =`30,154 30,156 ${props.jsonPricesTomorrow?"510":"270"},156
                      ${props.jsonPricesTomorrow?"510":"270"},154`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_axis_line_color
                    points: =`30,198 30,200 ${props.jsonPricesTomorrow?"510":"270"},200
                      ${props.jsonPricesTomorrow?"510":"270"},198`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('HH')=="0"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`40,${loop.coords.p0} 30,${loop.coords.p0} 30,200
                      ${40-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="1"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`50,${loop.coords.p1} 40,${loop.coords.p1} 40,200
                      ${50-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="2"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`60,${loop.coords.p2} 50,${loop.coords.p2} 50,200
                      ${60-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="3"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`70,${loop.coords.p3} 60,${loop.coords.p3} 60,200
                      ${70-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="4"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`80,${loop.coords.p4} 70,${loop.coords.p4} 70,200
                      ${80-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="5"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`90,${loop.coords.p5} 80,${loop.coords.p5} 80,200
                      ${90-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="6"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`100,${loop.coords.p6} 90,${loop.coords.p6} 90,200
                      ${100-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="7"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`110,${loop.coords.p7} 100,${loop.coords.p7} 100,200
                      ${110-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="8"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`120,${loop.coords.p8} 110,${loop.coords.p8} 110,200
                      ${120-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="9"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`130,${loop.coords.p9} 120,${loop.coords.p9} 120,200
                      ${130-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="10"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`140,${loop.coords.p10} 130,${loop.coords.p10} 130,200
                      ${140-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="11"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`150,${loop.coords.p11} 140,${loop.coords.p11} 140,200
                      ${150-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="12"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`160,${loop.coords.p12} 150,${loop.coords.p12} 150,200
                      ${160-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="13"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`170,${loop.coords.p13} 160,${loop.coords.p13} 160,200
                      ${170-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="14"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`180,${loop.coords.p14} 170,${loop.coords.p14} 170,200
                      ${180-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="15"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`190,${loop.coords.p15} 180,${loop.coords.p15} 180,200
                      ${190-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="16"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`200,${loop.coords.p16} 190,${loop.coords.p16} 190,200
                      ${200-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="17"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`210,${loop.coords.p17} 200,${loop.coords.p17} 200,200
                      ${210-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="18"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`220,${loop.coords.p18} 210,${loop.coords.p18} 210,200
                      ${220-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="19"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`230,${loop.coords.p19} 220,${loop.coords.p19} 220,200
                      ${230-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="20"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`240,${loop.coords.p20} 230,${loop.coords.p20} 230,200
                      ${240-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="21"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`250,${loop.coords.p21} 240,${loop.coords.p21} 240,200
                      ${250-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="22"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`260,${loop.coords.p22} 250,${loop.coords.p22} 250,200
                      ${260-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="23"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`270,${loop.coords.p23} 260,${loop.coords.p23} 260,200
                      ${270-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`280,${loop.coords.p24} 270,${loop.coords.p24} 270,200
                      ${280-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`290,${loop.coords.p25} 280,${loop.coords.p25} 280,200
                      ${290-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`300,${loop.coords.p26} 290,${loop.coords.p26} 290,200
                      ${300-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`310,${loop.coords.p27} 300,${loop.coords.p27} 300,200
                      ${310-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`320,${loop.coords.p28} 310,${loop.coords.p28} 310,200
                      ${320-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`330,${loop.coords.p29} 320,${loop.coords.p29} 320,200
                      ${330-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`340,${loop.coords.p30} 330,${loop.coords.p30} 330,200
                      ${340-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`350,${loop.coords.p31} 340,${loop.coords.p31} 340,200
                      ${350-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`360,${loop.coords.p32} 350,${loop.coords.p32} 350,200
                      ${360-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`370,${loop.coords.p33} 360,${loop.coords.p33} 360,200
                      ${370-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`380,${loop.coords.p34} 370,${loop.coords.p34} 370,200
                      ${380-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`390,${loop.coords.p35} 380,${loop.coords.p35} 380,200
                      ${390-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`400,${loop.coords.p36} 390,${loop.coords.p36} 390,200
                      ${400-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`410,${loop.coords.p37} 400,${loop.coords.p37} 400,200
                      ${410-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`420,${loop.coords.p38} 410,${loop.coords.p38} 410,200
                      ${420-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`430,${loop.coords.p39} 420,${loop.coords.p39} 420,200
                      ${430-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`440,${loop.coords.p40} 430,${loop.coords.p40} 430,200
                      ${440-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`450,${loop.coords.p41} 440,${loop.coords.p41} 440,200
                      ${450-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`460,${loop.coords.p42} 450,${loop.coords.p42} 450,200
                      ${460-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`470,${loop.coords.p43} 460,${loop.coords.p43} 460,200
                      ${470-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`480,${loop.coords.p44} 470,${loop.coords.p44} 470,200
                      ${480-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`490,${loop.coords.p45} 480,${loop.coords.p45} 480,200
                      ${490-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`500,${loop.coords.p46} 490,${loop.coords.p46} 490,200
                      ${500-loop.coords.graph_spacing},200`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`510,${loop.coords.p47} 500,${loop.coords.p47} 500,200
                      ${510-loop.coords.graph_spacing},200`

[vfebert (veb)]

This thing is awesome, thank you very much! Works perfectly well on Google Chrome on PC. Just on Chrome on IOS, the axis aren’t matching the bars - nothing dramatic.
So, I wondered when it would be cheapest to start charging my Tesla. Little rule attached.

your code goes here

// This code is from ChatGPT.  Getting 48 values plus storing into priceArray Works fine
rule "Parse Tibber prices for today and tomorrow into array"
when
    Item Tibber_API_Prices_today_JSON changed or
    Item Tibber_API_Prices_tomorrow_JSON changed or
    Time cron "0 0 * * * ?"   // once per hour to prevent best start tim in past
    
   
then
    // Array (Liste) für die Preise erstellen
    val priceArray = newArrayList()

    // Get current hour. We cannot start charging in the past
    var CurrentHour = now.getHour

    // Get percentage charging for Tesla. Calculate charge time in hours assuming 11kWh / 80kWh full
    var BattLevel = TeslaBatteryLevel.state as Number
    var ChargeTimeH = (80.0-BattLevel)/11.0
    
    if (ChargeTimeH < 0.1 ) {ChargeTimeH=0}
    TestStr2.postUpdate("LZ: " + ChargeTimeH.toString)
    ChargeTime.postUpdate(ChargeTimeH)
    
    var ChargeCostActualTest  = 999.0 // trying 23 for each starting hour
    var ChargeCost0_100H =0.01  // extrapolating to a full 0% --> 100% charge
    var LowestChargeCost = 999.0 // finding out the hour when charge cost is minimal
    var LowestCostHour = CurrentHour // which hour to start ??
    var lastPossibleChargeStartHour =47  // last known hour of prices - chargeTimeH
    
        
    // Heutige Preise verarbeiten - alongside: calculate total cost
    val todayJson = Tibber_API_Prices_today_JSON.state.toString
    for (i : 0..23) {
        val price = transform("JSONPATH", "$[" + i + "].total", todayJson)
        if (price !== null) {
            priceArray.add(price)
        } else {
            logWarn("Tibber", "Kein Preis für Stunde " + i + " in 'Heute'-JSON gefunden!")
        }
    }
 // first moment of charging: current hour. Last moment of start charging: either 23:59 today - or Tomorrow
  
        // Morgige Preise verarbeiten
    val tomorrowJson = Tibber_API_Prices_tomorrow_JSON.state.toString
    for (i : 0..23) {
        val price = transform("JSONPATH", "$[" + i + "].total", tomorrowJson)
        if (price !== null) {
            priceArray.add(price)
        } else {
            logWarn("Tibber", "Kein Preis für Stunde " + (i + 24) + " in 'Morgen'-JSON gefunden!")
            lastPossibleChargeStartHour =23 
        }
    }
    lastPossibleChargeStartHour = lastPossibleChargeStartHour - ChargeTimeH.intValue 

    // Try charging at now, now+1 hour, now + 2 hours etc 
    for (TestStartHour: CurrentHour..lastPossibleChargeStartHour)
    {
        ChargeCostActualTest=0
    // sum up total cost for charging when we would start at TestStartHour:    
    // 18.Jan 2025: Last hour: Do calculate in fractions of one hour to make cost more precise
        for (i: TestStartHour..TestStartHour+ ChargeTimeH.intValue){
            val priceString = priceArray.get(i)
            val priceDouble = Double::parseDouble(priceString)
            
            if (i< (TestStartHour + ChargeTimeH.intValue)) {   // not yet last hour charging
                ChargeCostActualTest = ChargeCostActualTest + priceDouble * 11.0
            } else {  // it is last hour of charging, we do not need full charging hour 
                ChargeCostActualTest = ChargeCostActualTest + priceDouble * 11.0 * (ChargeTimeH - ChargeTimeH.intValue)
            }
          
            //logInfo("Tibber", "TestStartHour: " + TestStartHour.toString + " TestedHour " + i.toString + " price " + priceDouble.toString + " ChargeCostActualTest " + ChargeCostActualTest.toString + " LowestChargeCost " + LowestChargeCost.toString + " CheapestStartHour " +LowestCostHour.toString + " Low0-100H ", ChargeCost0_100H)
        }
        if (ChargeCostActualTest<LowestChargeCost) {  //we found a cheaper hour to start charging
            LowestChargeCost=ChargeCostActualTest  
            LowestCostHour = TestStartHour

          //ChargeStartHourBest.postUpdate(LowestCostHour)
            var str = "H: " // heute
            if (LowestCostHour > 23) {
                str = "M: " // morgen
                LowestCostHour= TestStartHour-24
            }
            str = str + LowestCostHour.toString + ":00"
            ChargeStartHourBest.postUpdate(str)
            ChargeCost0_100H = LowestChargeCost / (80.0-BattLevel) * 100
            logInfo("Tibber", "ChargeCost0-100: " + ChargeCost0_100H.toString)
        }
    }
    
    ChargeCost0_100H = LowestChargeCost / (80.0-BattLevel) *100
    ChargeCost0_100.postUpdate(ChargeCost0_100H)  // What would you have to pay at those prices for a 0% up to 100% charge - to make it comparable
    ChargeCostActual.postUpdate(LowestChargeCost) // what would this todays or tomorrows charging actually cost

    if ((BattLevel>75) || (ChargeTimeH < 0.1 )) {  //Tesla battery is full, does not make any sense to charge now
        ChargeCost0_100.postUpdate(0.02)
        ChargeCostActual.postUpdate(0.01)
        ChargeStartHourBest.postUpdate("n.a. full")
    }
    //logInfo("Tibber", "Preis-Array (0-47): " + priceArray.toString)
end

[abakus]

Hi folks,
I’ve added some new features. First of all I added the dynamic y-axcis and secondly I added a dynamic bar size. So you can scale the widget in width. Unfortunately, I had to remove the axis label because I couldn’t figure out how to scale it with the bars.
Have fun with it!

uid: tibber2DayChartDynamic
tags:
  - chart
  - tibber
props:
  parameters:
    - context: item
      label: JSON of todays prices
      name: jsonPricesToday
      required: false
      type: TEXT
    - context: item
      label: JSON of tomorrows prices
      name: jsonPricesTomorrow
      required: false
      type: TEXT
    - context: item
      label: Timestamp for measurement (empty for no highlighting)
      name: dtMeasurement
      required: false
      type: TEXT
    - label: bar_size (default 10)
      name: bar_size
      required: false
      type: TEXT
    - label: graph color (default rgba(35, 184, 204, 0.55))
      name: graph_background
      required: false
      type: TEXT
    - label: graph color for current hour (default rgba(35, 184, 204, 0.9))
      name: graph_background_now
      required: false
      type: TEXT
    - label: graph x-axis text color (default= lightgrey)
      name: graph_x_axis_text_color
      required: false
      type: TEXT
    - label: graph y-axis text color (default= lightgrey)
      name: graph_y_axis_text_color
      required: false
      type: TEXT
    - label: graph axis line color (default= grey)
      name: graph_axis_line_color
      required: false
      type: TEXT
    - label: graph spacing between hourbars (default= 0)
      name: graph_spacing
      required: false
  parameterGroups: []
timestamp: Jan 31, 2025, 8:44:23 PM
component: oh-repeater
config:
  for: coords
  fragment: true
  in:
    - first_bar: 50
      chart_height_01: 200
      chart_height_02: 220
      scale_factor: 1
      graph_axis_line_color: =props.graph_axis_line_color?props.graph_axis_line_color :'grey'
      graph_background: =props.graph_background?props.graph_background:'rgba(35, 184, 204, 0.55)'
      graph_background_now: =props.graph_background_now?props.graph_background_now:'rgba(35,
        184, 204, 0.90)'
      graph_spacing: =props.graph_spacing?props.graph_spacing:0
      graph_x_axis_text_color: =props.graph_x_axis_text_color?props.graph_x_axis_text_color :'lightgrey'
      graph_y_axis_text_color: =props.graph_y_axis_text_color?props.graph_y_axis_text_color :'lightgrey'
      p0: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[0].total))
        * 100
      p1: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[1].total))
        * 100
      p2: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[2].total))
        * 100
      p3: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[3].total))
        * 100
      p4: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[4].total))
        * 100
      p5: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[5].total))
        * 100
      p6: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[6].total))
        * 100
      p7: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[7].total))
        * 100
      p8: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[8].total))
        * 100
      p9: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[9].total))
        * 100
      p10: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[10].total))
        * 100
      p11: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[11].total))
        * 100
      p12: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[12].total))
        * 100
      p13: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[13].total))
        * 100
      p14: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[14].total))
        * 100
      p15: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[15].total))
        * 100
      p16: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[16].total))
        * 100
      p17: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[17].total))
        * 100
      p18: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[18].total))
        * 100
      p19: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[19].total))
        * 100
      p20: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[20].total))
        * 100
      p21: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[21].total))
        * 100
      p22: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[22].total))
        * 100
      p23: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[23].total))
        * 100
      p24: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[0].total))
        * 100
      p25: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[1].total))
        * 100
      p26: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[2].total))
        * 100
      p27: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[3].total))
        * 100
      p28: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[4].total))
        * 100
      p29: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[5].total))
        * 100
      p30: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[6].total))
        * 100
      p31: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[7].total))
        * 100
      p32: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[8].total))
        * 100
      p33: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[9].total))
        * 100
      p34: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[10].total))
        * 100
      p35: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[11].total))
        * 100
      p36: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[12].total))
        * 100
      p37: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[13].total))
        * 100
      p38: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[14].total))
        * 100
      p39: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[15].total))
        * 100
      p40: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[16].total))
        * 100
      p41: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[17].total))
        * 100
      p42: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[18].total))
        * 100
      p43: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[19].total))
        * 100
      p44: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[20].total))
        * 100
      p45: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[21].total))
        * 100
      p46: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[22].total))
        * 100
      p47: =
        (Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[23].total))
        * 100
      bar_size: =props.bar_size?props.bar_size:10
      max_price: =`${Math.round((100 *
        Math.max(Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[0].total),
        Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[1].total),
        Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[2].total),
        Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[3].total),
        Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[4].total),
        Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[5].total),
        Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[6].total),
        Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[7].total),
        Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[8].total),
        Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[9].total),
        Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[10].total),
        Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[11].total),
        Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[12].total),
        Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[13].total),
        Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[14].total),
        Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[15].total),
        Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[16].total),
        Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[17].total),
        Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[18].total),
        Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[19].total),
        Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[20].total),
        Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[21].total),
        Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[22].total),
        Number.parseFloat(JSON.parse(items[props.jsonPricesToday].state)[23].total),
        (props.jsonPricesTomorrow?0:Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[1].total)),
        (props.jsonPricesTomorrow?0:Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[2].total)),
        (props.jsonPricesTomorrow?0:Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[3].total)),
        (props.jsonPricesTomorrow?0:Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[4].total)),
        (props.jsonPricesTomorrow?0:Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[5].total)),
        (props.jsonPricesTomorrow?0:Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[6].total)),
        (props.jsonPricesTomorrow?0:Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[7].total)),
        (props.jsonPricesTomorrow?0:Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[8].total)),
        (props.jsonPricesTomorrow?0:Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[9].total)),
        (props.jsonPricesTomorrow?0:Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[10].total)),
        (props.jsonPricesTomorrow?0:Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[11].total)),
        (props.jsonPricesTomorrow?0:Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[12].total)),
        (props.jsonPricesTomorrow?0:Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[13].total)),
        (props.jsonPricesTomorrow?0:Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[14].total)),
        (props.jsonPricesTomorrow?0:Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[15].total)),
        (props.jsonPricesTomorrow?0:Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[16].total)),
        (props.jsonPricesTomorrow?0:Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[17].total)),
        (props.jsonPricesTomorrow?0:Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[18].total)),
        (props.jsonPricesTomorrow?0:Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[19].total)),
        (props.jsonPricesTomorrow?0:Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[20].total)),
        (props.jsonPricesTomorrow?0:Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[21].total)),
        (props.jsonPricesTomorrow?0:Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[22].total)),
        (props.jsonPricesTomorrow?0:Number.parseFloat(JSON.parse(items[props.jsonPricesTomorrow].state)[23].total))
        )))}`
  sourceType: array
slots:
  default:
    - component: f7-card
      config:
        style:
          height: =`${loop.coords.chart_height_02 + 20}px`
          width: =`${loop.coords.bar_size * 48 + loop.coords.first_bar + 30}px`
      slots:
        default:
          - component: f7-block
            config:
              style:
                display: flex
                flex-direction: column
                left: -10px
                position: absolute
                top: -5px
            slots:
              default:
                - component: Label
                  config:
                    style:
                      color: =`${loop.coords.graph_y_axis_text_color}`
                      font-size: 12px
                      margin-top: 0px
                    text: =`${loop.coords.max_price}`
                - component: Label
                  config:
                    style:
                      color: =`${loop.coords.graph_y_axis_text_color}`
                      font-size: 12px
                      margin-top: =`${loop.coords.scale_factor * 30}px`
                    text: =`${loop.coords.max_price * .75 }`
                - component: Label
                  config:
                    style:
                      color: =`${loop.coords.graph_y_axis_text_color}`
                      font-size: 12px
                      margin-top: =`${loop.coords.scale_factor * 30}px`
                    text: =`${loop.coords.max_price * .50 }`
                - component: Label
                  config:
                    style:
                      color: =`${loop.coords.graph_y_axis_text_color}`
                      font-size: 12px
                      margin-top: =`${loop.coords.scale_factor * 30}px`
                    text: =`${loop.coords.max_price * .25 }`
                - component: Label
                  config:
                    style:
                      color: =`${loop.coords.graph_y_axis_text_color}`
                      font-size: 12px
                      margin-top: =`${loop.coords.scale_factor * 30}px`
                    text: 0
                - component: f7-block
                  config:
                    style:
                      display: flex
                      flex-direction: row
          - component: svg
            config:
              height: =`${loop.coords.chart_height_02}px`
              width: =`${loop.coords.bar_size * 48 + loop.coords.first_bar}px`
            slots:
              default:
                - component: polygon
                  config:
                    fill: =loop.coords.graph_axis_line_color
                    points: =`${loop.coords.first_bar - 10},19 ${loop.coords.first_bar - 10},20
                      ${loop.coords.bar_size * 48 + loop.coords.first_bar},20
                      ${loop.coords.bar_size * 48 + loop.coords.first_bar},19`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_axis_line_color
                    points: =`${loop.coords.first_bar - 10},69 ${loop.coords.first_bar - 10},70
                      ${loop.coords.bar_size * 48 + loop.coords.first_bar},70
                      ${loop.coords.bar_size * 48 + loop.coords.first_bar},69`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_axis_line_color
                    points: =`${loop.coords.first_bar - 10},119 ${loop.coords.first_bar - 10},120
                      ${loop.coords.bar_size * 48 + loop.coords.first_bar},120
                      ${loop.coords.bar_size * 48 + loop.coords.first_bar},119`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_axis_line_color
                    points: =`${loop.coords.first_bar - 10},169 ${loop.coords.first_bar - 10},170
                      ${loop.coords.bar_size * 48 + loop.coords.first_bar},170
                      ${loop.coords.bar_size * 48 + loop.coords.first_bar},169`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_axis_line_color
                    points: =`${loop.coords.first_bar - 10},219 ${loop.coords.first_bar - 10},220
                      ${loop.coords.bar_size * 48 + loop.coords.first_bar},220
                      ${loop.coords.bar_size * 48 + loop.coords.first_bar},219`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('HH')=="0"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`${loop.coords.first_bar},${loop.coords.chart_height_02-(loop.coords.p0/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p0/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="1"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`${(loop.coords.first_bar + 1 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p1/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar + 1 * loop.coords.bar_size -
                      loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p1/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar + 1 * loop.coords.bar_size -
                      loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar + 1 * loop.coords.bar_size -
                      -loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="2"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`${(loop.coords.first_bar + 2 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p2/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+2 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p2/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+2 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+2 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="3"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`${(loop.coords.first_bar + 3 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p3/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+3 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p3/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+3 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+3 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="4"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`${(loop.coords.first_bar + 4 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p4/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+4 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p4/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+4 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+4 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="5"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`${(loop.coords.first_bar + 5 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p5/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+5 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p5/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+5 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+5 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="6"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`${(loop.coords.first_bar + 6 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p6/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+6 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p6/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+6 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+6 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="7"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`${(loop.coords.first_bar + 7 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p7/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+7 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p7/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+7 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+7 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="8"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`${(loop.coords.first_bar + 8 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p8/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+8 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p8/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+8 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+8 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="9"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`${(loop.coords.first_bar + 9 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p9/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+9 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p9/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+9 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+9 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="10"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`${(loop.coords.first_bar + 10 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p10/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+10 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p10/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+10 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+10 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="11"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`${(loop.coords.first_bar + 11 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p11/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+11 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p11/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+11 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+11 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="12"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`${(loop.coords.first_bar + 12 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p12/loop.coords.max_price)*loop.coords.chart_height_01
                      } ${(loop.coords.first_bar+12 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p12/loop.coords.max_price)*loop.coords.chart_height_01
                      } ${(loop.coords.first_bar+12 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+12 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="13"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`${(loop.coords.first_bar + 13 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p13/loop.coords.max_price)*loop.coords.chart_height_01
                      } ${(loop.coords.first_bar+13 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p13/loop.coords.max_price)*loop.coords.chart_height_01
                      } ${(loop.coords.first_bar+13 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+13 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="14"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`${(loop.coords.first_bar + 14 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p14/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+14 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p14/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+14 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+14 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="15"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`${(loop.coords.first_bar + 15 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p15/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+15 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p15/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+15 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+15 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="16"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`${(loop.coords.first_bar + 16 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p16/loop.coords.max_price)*loop.coords.chart_height_01
                      } ${(loop.coords.first_bar+16 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p16/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+16 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+16 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="17"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`${(loop.coords.first_bar + 17 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p17/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+17 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p17/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+17 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+17 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="18"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`${(loop.coords.first_bar + 18 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p18/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+18 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p18/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+18 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+18 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="19"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`${(loop.coords.first_bar + 19 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p19/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+19 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p19/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+19 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+19 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="20"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`${(loop.coords.first_bar + 20 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p20/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+20 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p20/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+20 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+20 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="21"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`${(loop.coords.first_bar + 21 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p21/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+21 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p21/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+21 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+21 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="22"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`${(loop.coords.first_bar + 22 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p22/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+22 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p22/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+22 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+22 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =dayjs(items[props.dtMeasurement].state).format('H')=="23"?`${loop.coords.graph_background_now}`:`${loop.coords.graph_background}`
                    points: =`${(loop.coords.first_bar + 23 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p23/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+23 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p23/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+23 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+23 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`${(loop.coords.first_bar + 24 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p24/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+24 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p24/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+24 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+24 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`${(loop.coords.first_bar + 25 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p25/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+25 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p25/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+25 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+25 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`${(loop.coords.first_bar + 26 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p26/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+26 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p26/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+26 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+26 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`${(loop.coords.first_bar + 27 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p27/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+27 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p27/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+27 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+27 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`${(loop.coords.first_bar + 28 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p28/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+28 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p28/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+28 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+28 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`${(loop.coords.first_bar + 29 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p29/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+29 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p29/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+29 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+29 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`${(loop.coords.first_bar + 30 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p30/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+30 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p30/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+30 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+30 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`${(loop.coords.first_bar + 31 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p31/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+31 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p31/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+31 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+31 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`${(loop.coords.first_bar + 32 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p32/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+32 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p32/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+32 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+32 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`${(loop.coords.first_bar + 33 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p33/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+33 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p33/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+33 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+33 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`${(loop.coords.first_bar + 34 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p34/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+34 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p34/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+34 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+34 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`${(loop.coords.first_bar + 35 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p35/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+35 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p35/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+35 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+35 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`${(loop.coords.first_bar + 36 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p36/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+36 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p36/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+36 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+36 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`${(loop.coords.first_bar + 37 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p37/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+37 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p37/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+37 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+37 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`${(loop.coords.first_bar + 38 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p38/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+38 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p38/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+38 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+38 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`${(loop.coords.first_bar + 39 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p39/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+39 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p39/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+39 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+39 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`${(loop.coords.first_bar + 40 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p40/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+40 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p40/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+40 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+40 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`${(loop.coords.first_bar + 41 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p41/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+41 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p41/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+41 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+41 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`${(loop.coords.first_bar + 42 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p42/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+42 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p42/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+42 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+42 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`${(loop.coords.first_bar + 43 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p43/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+43 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p43/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+43 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+43 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`${(loop.coords.first_bar + 44 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p44/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+44 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p44/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+44 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+44 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`${(loop.coords.first_bar + 45 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p45/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+45 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p45/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+45 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+45 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`${(loop.coords.first_bar + 46 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p46/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+46 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p46/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+46 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+46 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`
                - component: polygon
                  config:
                    fill: =loop.coords.graph_background
                    points: =`${(loop.coords.first_bar + 47 * loop.coords.bar_size)
                      },${loop.coords.chart_height_02-(loop.coords.p47/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+47 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02-(loop.coords.p47/loop.coords.max_price)*loop.coords.chart_height_01}
                      ${(loop.coords.first_bar+47 *
                      loop.coords.bar_size-loop.coords.bar_size)},${loop.coords.chart_height_02}
                      ${(loop.coords.first_bar+47 *
                      loop.coords.bar_size-loop.coords.graph_spacing)},${loop.coords.chart_height_02}`

[abakus]

Hi, to charge my car depending on the price, I use evcc which works perfectly for my Nissan and should work with Tesla too. Should also work even if you don’t have a solar system.