# KyvisLabs ApexChart Module

**URL:** <https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263>\
**Category:** Ignition\
**Created:** [July 21, 2021, 11:16pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263 "2021-07-21T23:16:30Z")\
**Posts on this page:** 20\
**Page:** 5

<div class="post-metadata">

**Author:** ![awaege1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/awaege1/32/28922_2.png) [@awaege1](https://forum.inductiveautomation.com/u/awaege1)\
**Post date:** [April 12, 2023, 7:59pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/83 "2023-04-12T19:59:20Z")

</div>

I have a pull request on github already open to fix this issue. Just waiting for a merge.

> <https://github.com/Kyvis-Labs/ignition-apexcharts-module/pull/41>
>
> Modified the component.js file to include the most up-to-date min.js source code… from the apex charts git repo. v3.36.2 --\> v3.37.2

---

<div class="post-metadata">

**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\
**Post date:** [April 21, 2023, 1:25pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/84 "2023-04-21T13:25:51Z")

</div>

This module is free?

Are there any drawbacks or considerations I need to know about the module?

I really like the radar chart with stacked series.  
I can bind query data like regular perspective components allow?

---

<div class="post-metadata">

**Author:** ![richardNZ15](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/richardnz15/32/33373_2.png) [@richardNZ15](https://forum.inductiveautomation.com/u/richardNZ15)\
**Post date:** [April 24, 2023, 7:35am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/85 "2023-04-24T07:35:11Z")

</div>

Yes its free. Works awesome for certain applications.  
Some chart types might not be able to be done how you want. But i think on the whole, the offerings are much better than the default charts available in Perspective right now..

I recommend giving it a shot and see what you think, based on your application needs.

I have noticed it is miles faster than Perspective components currently offered for datasets where row count is in the thousands.

---

<div class="post-metadata">

**Author:** ![dhananjay\_vichare](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dhananjay_vichare/32/74712_2.png) [@dhananjay\_vichare](https://forum.inductiveautomation.com/u/dhananjay_vichare)\
**Post date:** [May 22, 2023, 1:25pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/86 "2023-05-22T13:25:47Z")

</div>

Hello,  
We would like to use ApexCharts with Ignition Edge (8.1.25). We have developed one Guage using ApexChart module on our Ignition local gateway, however the same Gauge is not working/displaying on Edge.

 ![MicrosoftTeams-image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/c/8cff056ca9387527c0f1ce75a13b91d8b66d80f3.png)

**Ignition edge showing below error.**

 ![MicrosoftTeams-image (1)](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/1/410c1ab43b05f1e4a40cf00e1a25fa39321f3def.png)

Please advise.

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [May 22, 2023, 2:14pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/87 "2023-05-22T14:14:03Z")

</div>

Third party modules are generally not allowed in Edge. Contact your sales agent at IA to see what might be possible for free modules.

---

<div class="post-metadata">

**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\
**Post date:** [May 23, 2023, 11:23am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/88 "2023-05-23T11:23:32Z")

</div>

Good morning, I create a very simple apex chart following the example of the website [https://apexcharts.com/javascript-chart-demos/line-charts/zoomable-timeseries/](https://apexcharts.com/javascript-chart-demos/line-charts/zoomable-timeseries/)

If I try to use the pan-zoom function launching the project via web everything works, instead if I try to zoom or pan with the smartphone it looks like the functions are disabled.

Maybe there's something to enable?

Thanks for the help.

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [June 13, 2023, 3:55am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/89 "2023-06-13T03:55:33Z")

</div>

Hi

Anybody can replicate the `Syncing charts` in the Perspective?

> **[JavaScript Synchronized Line Charts – ApexCharts.js](https://apexcharts.com/javascript-chart-demos/line-charts/syncing-charts/)**
>
> Checkout an example of syncing charts that updates together. Look how one chart's interaction updates the properties of other charts when you zoon in/out.

As it needs several different options object and uses chart.group I wonder how to do with the module which only accepts single option.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/3/132fb0e4a2cfcf50620733617857af150305dd57.png)

---

<div class="post-metadata">

**Author:** ![schenk](https://avatars.discourse-cdn.com/v4/letter/s/6bbea6/32.png) [@schenk](https://forum.inductiveautomation.com/u/schenk)\
**Post date:** [June 13, 2023, 9:57am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/90 "2023-06-13T09:57:02Z")

</div>

This works using 3 separate charts. Set a unique value on `props.options.chart.id` and a common group name on `props.options.chart.group`

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [June 14, 2023, 7:10am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/91 "2023-06-14T07:10:28Z")

</div>

I did that but it seems as charts are isolated in module they don't detect each other.

Did you do that before? If yes could you please export the view for me.

---

<div class="post-metadata">

**Author:** ![schenk](https://avatars.discourse-cdn.com/v4/letter/s/6bbea6/32.png) [@schenk](https://forum.inductiveautomation.com/u/schenk)\
**Post date:** [June 14, 2023, 10:11am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/92 "2023-06-14T10:11:20Z")

</div>

Here is a view to import that worked for me  
[ApexChartGroup.zip](https://forum.inductiveautomation.com/uploads/short-url/3vrVSSW6nEgL2Zn0NwwD0dg1g5.zip) (57.1 KB)

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [June 14, 2023, 6:36pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/93 "2023-06-14T18:36:22Z")

</div>

I did the same thing but as you see in following image when I mouse hover one chart it only show tooltip for one not the other chart as well.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/1/8180e7dd85558347de5cb1107f5a62e060fae490.png)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/a/9acea00227773a7139c50513e93e179072958eb2.png)

---

<div class="post-metadata">

**Author:** ![schenk](https://avatars.discourse-cdn.com/v4/letter/s/6bbea6/32.png) [@schenk](https://forum.inductiveautomation.com/u/schenk)\
**Post date:** [June 14, 2023, 8:23pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/94 "2023-06-14T20:23:43Z")

</div>

What are the lengths of each charts `props.series[i].data` arrays? It looks like having different lengths causes this functionality to break, while different lengths of the `props.chart.xaxis.categories` does not.

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [June 14, 2023, 9:57pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/95 "2023-06-14T21:57:14Z")

</div>

All three pen set to return 500 point with same time range.

---

<div class="post-metadata">

**Author:** ![schenk](https://avatars.discourse-cdn.com/v4/letter/s/6bbea6/32.png) [@schenk](https://forum.inductiveautomation.com/u/schenk)\
**Post date:** [June 14, 2023, 10:18pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/96 "2023-06-14T22:18:27Z")

</div>

Hmm, not sure. Can you attach a copy of the view?

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [June 15, 2023, 3:09am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/97 "2023-06-15T03:09:53Z")

</div>

Sure  
[card.zip](https://forum.inductiveautomation.com/uploads/short-url/agKjt1sKMVfFJmgp4expN2PtXIR.zip) (15.5 KB)

---

<div class="post-metadata">

**Author:** ![schenk](https://avatars.discourse-cdn.com/v4/letter/s/6bbea6/32.png) [@schenk](https://forum.inductiveautomation.com/u/schenk)\
**Post date:** [June 15, 2023, 2:36pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/98 "2023-06-15T14:36:40Z")

</div>

I played around with the view a bit. I dropped the point count to 5 for simplification and just returned null values for all items. If the t\_stamps are aligned, the synchronization works, but if a binding updates at a different time it does not.

 ![MatchingTStamps](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/2/42d230fd2f4a2258b437a4b1d6037d7703fb18d3.png)  
vs  
 ![MismatchedTStamps](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/7/07a42c4c47914fd23656c9ed4b8fc0dba77e29a1.png)

You could try to retrieve all of the datapoints in a single event, then write them to the proper series on change.

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [June 15, 2023, 9:02pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/99 "2023-06-15T21:02:53Z")

</div>

Got you. The reason I try to delete null value is they cause designer freeze and run time slow down which is strange

---

<div class="post-metadata">

**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\
**Post date:** [June 27, 2023, 2:20pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/100 "2023-06-27T14:20:32Z")

</div>

I create dummy variables to keep Perspective charts happy.  
In SQL, I join a blank interval and select case with preceding to handle null datapoints.  
I have a bar chart behind to depict active datapoints, maybe useful.  
Maybe it won't translate to that set of charts though.

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [June 28, 2023, 2:37pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/101 "2023-06-28T14:37:54Z")

</div>

I see something really strange when my 2hrs trial version is finished, the runtime and designer are extremely slow and laggy.  
I do some check and find out that your return dataset has a Null value, this will happen for a time series-type chart.

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [July 21, 2023, 8:15am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/102 "2023-07-21T08:15:19Z")

</div>

Adding tickAmount to the yaxis causes designer crash as shown below:  
 ![tickAmount crash](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/7/d7a76eef9bad9d315db50b5e6d5c585a13a2a2a5.gif)

[Previous page](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263.md?page=4)

[Next page](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263.md?page=6)
