Does someone know how to descrease/remove empty space around a simplified powerchart?
could you provide the json of the view?
[
{
"type": "ia.container.flex",
"version": 0,
"props": {
"style": {
"classes": "drive_selection/Cards/main_card"
}
},
"meta": {
"name": "root"
},
"position": {},
"custom": {},
"children": [
{
"type": "ia.container.flex",
"version": 0,
"props": {
"direction": "column"
},
"meta": {
"name": "current_value"
},
"position": {
"basis": "200px"
},
"custom": {}
},
{
"type": "ia.chart.powerchart",
"version": 0,
"props": {
"config": {
"unitOfTime": 10,
"measureOfTime": "minutes",
"rangeStartDate": {
"$": [
"ts",
0,
1633000960811
],
"$ts": 1633000360756
},
"rangeEndDate": {
"$": [
"ts",
0,
1633000960811
],
"$ts": 1633000958756
},
"responsiveDesignWidth": 400,
"visibility": {
"showDateRangeSelector": false,
"showPenControlDisplay": false,
"buttons": {
"showTagBrowserButton": false,
"showPanZoomButton": false,
"showXTraceButton": false,
"showRangeBrushButton": false,
"showAnnotationButton": false,
"showFullscreenButton": false,
"showSettingsButton": false,
"showMoreButton": false
}
}
},
"interaction": {
"fullscreen": true
},
"axes": [
{
"color": "#FFFFFF",
"dataFormat": "0,0.##",
"label": {
"font": {
"color": "#FFFFFF",
"size": 10
},
"offset": 0,
"style": {
"classes": "",
"color": "#FFFFFF"
},
"text": ""
},
"name": "default",
"position": "left",
"range": {
"auto": true,
"max": "",
"min": ""
},
"style": {
"classes": ""
},
"tick": {
"color": "#FFFFFF",
"label": {
"font": {
"color": "#FFFFFF",
"size": 10
},
"style": {
"classes": ""
}
},
"style": {
"classes": ""
}
},
"width": 40
}
],
"pens": [
{
"axis": "default",
"data": {
"aggregateMode": "default",
"source": ""
},
"display": {
"breakLine": true,
"interpolation": "curveLinear",
"radius": 3,
"styles": {
"highlighted": {
"fill": {
"color": "#42CBFF21",
"opacity": 0.8
},
"stroke": {
"color": "#63BEA2",
"dashArray": 0,
"opacity": 1,
"width": 1
}
},
"muted": {
"fill": {
"color": "#63BEA2",
"opacity": 0.4
},
"stroke": {
"color": "#63BEA2",
"dashArray": 0,
"opacity": 0.4,
"width": 1
}
},
"normal": {
"fill": {
"color": "#42CBFF21",
"opacity": 0.8
},
"stroke": {
"color": "#00ACAC",
"dashArray": 0,
"opacity": 0.8,
"width": 2
}
},
"selected": {
"fill": {
"color": "#42CBFF21",
"opacity": 0.8
},
"stroke": {
"color": "#63BEA2",
"dashArray": 0,
"opacity": 1,
"width": 1
}
}
},
"type": "area"
},
"enabled": true,
"name": "flow_fb",
"plot": 0,
"selectable": false,
"visible": true
}
],
"plots": [
{
"relativeWeight": 1,
"color": "#FFFFFF00",
"markers": [],
"style": {
"classes": "",
"color": "#FFFFFF"
}
}
],
"title": {
"font": {
"size": 0
},
"style": {
"margin": 0,
"padding": 0
}
},
"timeAxis": {
"visible": false,
"height": 0
},
"style": {
"classes": "chart-header mobile",
"backgroundColor": "#FFFFFF00",
"borderStyle": "none"
}
},
"meta": {
"name": "PowerChart"
},
"position": {
"grow": 1,
"basis": "392px"
},
"custom": {}
}
]
}
]
You could try addign style:clip-path:inset(20px 5% 0 30px) or something
you’ll have to play with the numbers a bit
This is a screenshot of Nader scada. Im trying to replicate this graph where the powerchart does not have this empy space.
you can always just place other components on top of eachother tho^^
but clip should work no?
There is a padding property on the chart header.If I disable it, the Power Chart grows and the empty space is removed.
So i was wondering it there is a way for me to disable this natively in the powerchart component or in the style of the powerchart component.
you can do that by creating a new theme.css, tho that might “break” the tables with a header/title
That would take the fun of trying to figure it out for myself but yes I probably should.
To be honest, I don’t use power chart and always use a time series chart which is faster and I add features that I want by label or icons.
You can do the @victordcq suggest but by adding a specific class before IA class to make it more specific.
Or
To remove empty spaces you can margin negative value in flex to force the chart to move up. For example margin-top: -20px.
One piece of advice, for dashboard view which you will use a lot of chart cards, don’t use a power chart for performance.
1 Like