OH3: oh-chart period formatting

Hi All

I have setup an oh-chart in a widget that looks as follows:

I would like to be able to format the period formatting as highlighted in the screen shot. I would like to prevent the overlap of the scale etc.

Any ideas on how I might achieve this?

My current YAML is as follows:

uid: Mains_Power_Monthly
tags: []
props:
  parameterGroups: []
timestamp: Jun 1, 2022, 2:35:46 PM
component: f7-page
config: {}
slots:
  default:
    - component: f7-row
      config:
        style:
          height: 45%
          width: 100%
          padding-left: 10px
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: Label
                  config:
                    style:
                      color: black
                      font-weight: 500
                      line-height: 20px
                      padding-left: 20px
                    text: Mains TOTAL Energy
                - component: oh-chart
                  config:
                    chartType: month
                    label: Mains Consumption Comparison
                    period: M
                  slots:
                    dataZoom:
                      - component: oh-chart-datazoom
                        config:
                          show: true
                          type: inside
                    grid:
                      - component: oh-chart-grid
                        config:
                          includeLabels: true
                    legend:
                      - component: oh-chart-legend
                        config:
                          bottom: 3
                          type: scroll
                    series:
                      - component: oh-time-series
                        config:
                          gridIndex: 0
                          item: ShellyEM_MAINS_TotalEnergy
                          name: Current
                          type: line
                          xAxisIndex: 1
                          yAxisIndex: 0
                      - component: oh-time-series
                        config:
                          gridIndex: 0
                          item: ShellyEM_MAINS_TotalEnergy
                          name: Previous
                          offsetAmount: 1
                          offsetUnit: month
                          type: line
                          xAxisIndex: 0
                          yAxisIndex: 0
                    tooltip:
                      - component: oh-chart-tooltip
                        config:
                          confine: true
                          smartFormatter: true
                    xAxis:
                      - component: oh-time-axis
                        config:
                          gridIndex: 0
                      - component: oh-time-axis
                        config:
                          gridIndex: 0
                          verticalAlign: top
                    yAxis:
                      - component: oh-value-axis
                        config:
                          position: left
                          containLabel: true
                          axisLabel:
                            rotate: 0
                            inside: false
                            show: true
                            margin: 5
                            showMaxLabel: false
                            showMinLabel: false
                            hideOverlap: true
                            fontSize: 9
                            align: right
                          gridIndex: 0
                          max: dataMax
                          min: dataMin
                          name: kWh
                          nameGap: 30
                          nameLocation: start
                          nameTextStyle:
                            align: right
                            color: black
                            padding: 6
                            verticalAlign: top
    - component: f7-row
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: f7-list
                  config:
                    class:
                      - padding-bottom
                  slots:
                    default:
                      - component: oh-toggle-item
                        config:
                          color: black
                          title: Store current EM Mains reading
                          item: ShellyEM_MAINS_TotalEnergy_Switch
                          style:
                            font-size: 120%
                            --f7-toggle-width: 60px
                            --f7-toggle-height: 25px
                      - component: oh-list-item
                        config:
                          color: black
                          title: = "Usage last Month - " + (items.ShellyEM_MAINS_TotalEnergy_Monthly.state)
                          style:
                            font-size: 120%
                      - component: oh-list-item
                        config:
                          color: black
                          title: = "Now - " + (items.ShellyEM_MAINS_TotalEnergy.state) +" Was - " + (items.ShellyEM_Mains_TotalEnergy_PreviousMonth.state)
                          style:
                            font-size: 120%

Thanks in advance

Did you solve this?

Sadly not.

I managed it by changing the top value and height for the chart.

Can you share an example?

Hi Mark,

sure - this is a widget I created recently.
Hope this helps.

The values to set the height and top of the chart are defined for the component below:

- component: oh-chart-grid
            config:
              height: 70% <<<<<<<<<<<
              includeLabels: true
              left: 70
              right: 90
              show: false
              top: 80 <<<<<<<<<

This is the full code of the widget for your reference.

uid: widget_Stromverbrauch_KW
tags: []
props:
  parameters:
    - description: A text prop
      label: Prop 1
      name: prop1
      required: false
      type: TEXT
    - context: item
      description: An item to control
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Jan 27, 2023, 10:19:49 AM
component: f7-card
config:
  backdrop: false
  class:
    - no-padding
  expandable: false
  style:
    --f7-theme-color: var(--f7-text-color)
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: var(--f7-card-expandable-box-shadow)
    height: 400px
    margin-bottom: 10px
    margin-left: 5px
    margin-right: 5px
    margin-top: 10px
    width: auto
  swipeToClose: false
slots:
  default:
    - component: oh-link
      config:
        action: navigate
        actionPage: page:Strom_Verbrauch_Heute
        actionPageTransition: f7-dive
        iconF7: expand
        style:
          margin-left: 10px
          margin-top: 10px
          opacity: 60%
          position: absolute
          z-index: 10
    - component: oh-chart
      config:
        chartType: day
        height: 100%
        label: Strom_Zähler
        period: D
      slots:
        grid:
          - component: oh-chart-grid
            config:
              height: 70%
              includeLabels: true
              left: 70
              right: 90
              show: false
              top: 80
        legend:
          - component: oh-chart-legend
            config:
              left: 70
              orient: horizontal
              top: 20
              type: scroll
        series:
          - component: oh-time-series
            config:
              areaStyle:
                opacity: 0.2
              color: red
              gridIndex: 0
              id: 0
              item: PC_Power_1_Strom
              markLine:
                data:
                  - type: average
              markPoint:
                data:
                  - name: min
                    type: min
                  - name: max
                    type: max
                label:
                  backgroundColor: auto
              name: Verbrauch
              type: line
              xAxisIndex: 0
              yAxisIndex: 0
          - component: oh-time-series
            config:
              gridIndex: 0
              id: 1
              item: PC_Counter_1_Strom
              name: Zähler
              type: line
              xAxisIndex: 0
              yAxisIndex: 1
        toolbox: []
        tooltip:
          - component: oh-chart-tooltip
            config:
              confine: true
              smartFormatter: true
        visualMap:
          - component: oh-chart-visualmap
            config:
              calculable: false
              max: "2"
              min: "0"
              orient: horizontal
              seriesIndex: 0
              show: false
              type: continuous
        xAxis:
          - component: oh-time-axis
            config:
              gridIndex: 0
        yAxis:
          - component: oh-value-axis
            config:
              axisLabel:
                formatter: "{value} KW"
              gridIndex: 0
              scale: false
          - component: oh-value-axis
            config:
              axisLabel:
                formatter: "{value} KWh"
              gridIndex: 0
              nameLocation: start
              scale: true