It's not just on resize, but also on page load. The same issue occurs in a Perspective session too (it's blocking the loading of other components).
Nothing is showing up in the logs, and I'm not seeing any increased CPU or GPU usage.
It's something specific to this chart that I can't narrow down - if I drag in the basic "ApexChart Line" component from the component browser, it renders wicked fast.
Ignition 8.1.28
Apex Charts Module 1.0.14
Ryzen 7 5800X
RTX 3090
128GB RAM
Chart Configuration
{
"annotations": {
"yaxis": [
{
"borderColor": "var(--palette-success-200)",
"opacity": 0.3,
"strokeDashArray": 5,
"y": 22
}
]
},
"chart": {
"animations": {
"enabled": false
},
"dropShadow": {
"blur": 10,
"color": "#000",
"enabled": false,
"left": 7,
"opacity": 0.2,
"top": 18
},
"events": {
"animationEnd": false,
"beforeMount": false,
"beforeResetZoom": false,
"beforeZoom": false,
"brushScrolled": false,
"click": false,
"dataPointMouseEnter": false,
"dataPointMouseLeave": false,
"dataPointSelection": false,
"legendClick": false,
"markerClick": false,
"mounted": false,
"mouseLeave": false,
"mouseMove": false,
"scrolled": false,
"selection": false,
"updated": false,
"zoomed": false
},
"height": 350,
"sparkline": {
"enabled": true
},
"toolbar": {
"show": false
},
"type": "area"
},
"colors": [
"var(--variant-Bg)"
],
"dataLabels": {
"enabled": false
},
"fill": {
"gradient": {
"gradientToColors": [
"var(--variant-Bg)"
],
"opacityFrom": 1,
"opactityTo": 0,
"shade": "light",
"shadeIntensity": 0.5,
"type": "vertical"
},
"type": "gradient"
},
"stroke": {
"curve": "smooth"
},
"title": {
"align": "left",
"text": ""
},
"tooltip": {
"style": {
"fontFamily": "var(--fontFamily-body)"
},
"theme": "dark"
},
"xaxis": {
"title": {
"text": "Last 2 hours"
},
"type": "datetime"
},
"yaxis": {
"max": 40,
"min": 5
}
}
View JSON
{
"custom": {},
"params": {
"classes": "Palette/primary Variant/solid"
},
"propConfig": {
"params.classes": {
"paramDirection": "input",
"persistent": true
}
},
"props": {
"defaultSize": {
"height": 258
}
},
"root": {
"children": [
{
"children": [
{
"meta": {
"name": "title"
},
"position": {
"grow": 1,
"shrink": 0
},
"props": {
"text": "Packaging Rate",
"textStyle": {
"classes": "Typography/h6"
}
},
"type": "ia.display.label"
},
{
"children": [
{
"meta": {
"name": "Label"
},
"props": {
"style": {
"classes": "Typography/body2"
},
"text": "Rate"
},
"type": "ia.display.label"
},
{
"meta": {
"name": "NumericEntryField"
},
"position": {
"grow": 1
},
"props": {
"containerStyle": {
"classes": "Variant/solid"
},
"enabled": false,
"spinner": {
"enabled": false
},
"style": {
"fontSize": "2rem"
},
"value": 24.3
},
"type": "ia.input.numeric-entry-field"
}
],
"meta": {
"name": "rate"
},
"position": {
"basis": "8rem"
},
"props": {
"direction": "column"
},
"type": "ia.container.flex"
},
{
"children": [
{
"meta": {
"name": "Label"
},
"props": {
"style": {
"classes": "Typography/body2"
},
"text": "Target"
},
"type": "ia.display.label"
},
{
"meta": {
"name": "NumericEntryField"
},
"position": {
"grow": 1
},
"props": {
"containerStyle": {
"classes": "Variant/outlined"
},
"enabled": false,
"spinner": {
"enabled": false
},
"style": {
"fontSize": "2rem"
},
"value": 24.3
},
"type": "ia.input.numeric-entry-field"
}
],
"meta": {
"name": "target"
},
"position": {
"basis": "8rem"
},
"props": {
"direction": "column"
},
"type": "ia.container.flex"
}
],
"meta": {
"name": "header"
},
"position": {
"shrink": 0
},
"props": {
"alignItems": "flex-start",
"style": {
"gap": "1rem",
"marginInline": "1rem",
"marginTop": "0.5rem"
}
},
"type": "ia.container.flex"
},
{
"children": [
{
"meta": {
"name": "apexchart"
},
"position": {
"basis": "150px",
"grow": 1,
"shrink": 0
},
"propConfig": {
"props.options.tooltip.theme": {
"binding": {
"config": {
"path": "session.props.theme"
},
"transforms": [
{
"expression": "if(indexOf({value}, \u0027light\u0027) !\u003d -1, \u0027light\u0027, \u0027dark\u0027)",
"type": "expression"
}
],
"type": "property"
}
}
},
"props": {
"options": {
"annotations": {
"yaxis": [
{
"borderColor": "var(--palette-success-200)",
"opacity": 0.3,
"strokeDashArray": 5,
"y": 22
}
]
},
"chart": {
"animations": {
"enabled": false
},
"dropShadow": {
"blur": 10,
"color": "#000",
"enabled": false,
"left": 7,
"opacity": 0.2,
"top": 18
},
"events": {
"animationEnd": false,
"beforeMount": false,
"beforeResetZoom": false,
"beforeZoom": false,
"brushScrolled": false,
"click": false,
"dataPointMouseEnter": false,
"dataPointMouseLeave": false,
"dataPointSelection": false,
"legendClick": false,
"markerClick": false,
"mounted": false,
"mouseLeave": false,
"mouseMove": false,
"scrolled": false,
"selection": false,
"updated": false,
"zoomed": false
},
"height": 350,
"sparkline": {
"enabled": true
},
"toolbar": {
"show": false
},
"type": "area"
},
"colors": [
"var(--variant-Bg)"
],
"dataLabels": {
"enabled": false
},
"fill": {
"gradient": {
"gradientToColors": [
"var(--variant-Bg)"
],
"opacityFrom": 1,
"opactityTo": 0,
"shade": "light",
"shadeIntensity": 0.5,
"type": "vertical"
},
"type": "gradient"
},
"stroke": {
"curve": "smooth"
},
"title": {
"align": "left",
"text": ""
},
"tooltip": {
"style": {
"fontFamily": "var(--fontFamily-body)"
}
},
"xaxis": {
"title": {
"text": "Last 2 hours"
},
"type": "datetime"
},
"yaxis": {
"max": 40,
"min": 5
}
},
"series": [
{
"data": [
{
"x": 5000,
"y": 20
},
{
"x": 10000,
"y": 25
},
{
"x": 15000,
"y": 25
},
{
"x": 20000,
"y": 30
},
{
"x": 25000,
"y": 18
},
{
"x": 30000,
"y": 18
},
{
"x": 35000,
"y": 18
},
{
"x": 40000,
"y": 15
},
{
"x": 45000,
"y": 15
}
],
"name": "Rate"
}
],
"style": {
"classes": "Typography/body1"
},
"type": "area"
},
"type": "kyvislabs.display.apexchart"
}
],
"meta": {
"name": "content"
},
"position": {
"grow": 1,
"shrink": 0
},
"props": {
"direction": "column",
"style": {
"overflow": "hidden"
}
},
"type": "ia.container.flex"
}
],
"meta": {
"name": "root"
},
"propConfig": {
"props.style.classes": {
"binding": {
"config": {
"path": "view.params.classes"
},
"transforms": [
{
"expression": "{value} + \u0027 Radius/lg\u0027",
"type": "expression"
}
],
"type": "property"
}
}
},
"props": {
"direction": "column",
"style": {
"overflow": "hidden"
}
},
"type": "ia.container.flex"
}
}