# Apex Charts, Slow re-render on a specific chart

**URL:** <https://forum.inductiveautomation.com/t/apex-charts-slow-re-render-on-a-specific-chart/77897>\
**Category:** 3rd Party Modules\
**Tags:** perspective\
**Created:** [August 15, 2023, 9:34pm UTC](https://forum.inductiveautomation.com/t/apex-charts-slow-re-render-on-a-specific-chart/77897 "2023-08-15T21:34:05Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [August 15, 2023, 9:34pm UTC](https://forum.inductiveautomation.com/t/apex-charts-slow-re-render-on-a-specific-chart/77897/1 "2023-08-15T21:34:05Z")

</div>

![java_x66TTMrst3](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/b/cb030661a80171fc6e70adaceb20b019a07afe69.gif)

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**
>
> ```auto
> {
> "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**
>
> ```auto
> {
> "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"
> }
> }
> 
> ```

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [August 16, 2023, 5:57pm UTC](https://forum.inductiveautomation.com/t/apex-charts-slow-re-render-on-a-specific-chart/77897/2 "2023-08-16T17:57:55Z")

</div>

I figured it out?

The test data I was using was causing the problem. After switching to real datetimes the render speed improved.

> **Original (Not Working) Data**
>
> ```auto
> [
> {
> "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
> }
> ]
> 
> ```

> **Working Data**
>
> ```auto
> [
> {
> "x": "2023-08-13 2:00:00",
> "y": 20
> },
> {
> "x": "2023-08-13 3:00:00",
> "y": 25
> },
> {
> "x": "2023-08-13 4:00:00",
> "y": 25
> },
> {
> "x": "2023-08-13 5:00:00",
> "y": 30
> },
> {
> "x": "2023-08-13 6:00:00",
> "y": 18
> },
> {
> "x": "2023-08-13 7:00:00",
> "y": 18
> },
> {
> "x": "2023-08-13 8:00:00",
> "y": 18
> },
> {
> "x": "2023-08-13 9:00:00",
> "y": 15
> },
> {
> "x": "2023-08-13 10:00:00",
> "y": 15
> }
> ]
> 
> ```

---

<div class="post-metadata">

**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\
**Post date:** [February 28, 2025, 6:03pm UTC](https://forum.inductiveautomation.com/t/apex-charts-slow-re-render-on-a-specific-chart/77897/3 "2025-02-28T18:03:35Z")

</div>

Good thing you figured it out... I was gonna suggest adding more RAM to your machine

/s

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [February 28, 2025, 6:34pm UTC](https://forum.inductiveautomation.com/t/apex-charts-slow-re-render-on-a-specific-chart/77897/4 "2025-02-28T18:34:58Z")

</div>

Funny story; Amazon messed up and delivered someone’s order of 4x32GB RAM sticks to my coworker’s house. He couldn’t do anything with them and they were compatible with my motherboard, so he gave them to me for free 🙃