I have a chart widget which is mostly ok except the height of the chart seems to trim the markpoint of the Max item and possibly the bottom, how do I change height, when I update the height it seems to move chart upwards instead of increasing the size of the box
uid: CHART_bar
tags:
- chart bar
props:
parameters:
- description: Header of the cell
label: Header
name: header
required: false
type: TEXT
- description: Icon top of the card (only f7 icons (without f7:))
label: Icon
name: icon
required: false
type: TEXT
- context: item
label: Graph Item
name: graphItem1
required: true
type: TEXT
- default: W
description: Period 4H,D,W,2H
label: Graph Period
name: graphPeriod
required: true
type: TEXT
parameterGroups: []
timestamp: Aug 5, 2023, 9:53:24 AM
component: f7-card
config:
key: =Math.random() + items[props.graphItem1].state.split(" ")[0]
style:
background-color: rgba(0,0,0,0)
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
margin-left: 5px
margin-right: 5px
noShadow: false
padding: 0px
slots:
content:
- component: f7-block
config:
style:
display: flex
flex-direction: row
left: 16px
position: absolute
top: -5px
slots:
default:
- component: f7-icon
config:
f7: =props.icon
size: 18
style:
margin-right: 10px
visible: "=props.icon ? true : false"
- component: Label
config:
style:
font-size: 12px
margin-top: 0px
text: "=props.header ? props.header : ''"
default:
- component: oh-chart
config:
options:
color:
- rgba(0,255,0,0.6)
- rgba(0,255,255,1)
- rgba(0,255,0,1)
period: =props.graphPeriod
slots:
grid:
- component: oh-chart-page
config:
containLabel: true
height: 100%
width: 90%
includeLabels: true
left: 20px
show: false
top: 1px
legend:
- component: oh-chart-legend
config:
show: false
top: 0px
type: scroll
series:
- component: oh-time-series
config:
item: =props.graphItem1
type: bar
markLine:
data:
- name: avg
type: average
itemStyle:
color: blue
markPoint:
data:
- name: Max
type: max
itemStyle:
color: orange
label:
- position: "bottom"
- itemStyle:
color: blue
name: Min
type: min
name: =props.graphItem1
smooth: true
xAxisIndex: 0
yAxisIndex: 0
tooltip:
- component: oh-chart-tooltip
config:
confine: true
orient: vertical
show: true
smartFormatter: true
xAxis:
- component: oh-time-axis
config:
gridIndex: 0
yAxis:
- component: oh-value-axis
config:
gridIndex: 0