# 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:** 1

<div class="post-metadata">

**Author:** ![kyvislabs](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kyvislabs/32/26325_2.png) [@kyvislabs](https://forum.inductiveautomation.com/u/kyvislabs)\
**Post date:** [July 21, 2021, 11:16pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/1 "2021-07-21T23:16:30Z")

</div>

Hello All,  
We have been working on a few modules lately, one of them being an Apex Charts module. We have been using this module for certain clients for the last few months, and in a few home automation systems, mine included. We will be releasing the source code for these modules in the coming weeks, just working on a website and the github. Commercial support is also available through an integration partner.

There are a few variants in the component tree already, and I can answer any questions and provide some further examples as required.

I can not post uploads with a new account, so please message me directly if interested and I will send you the module.

Thanks!

Below is an example screen. All of these charts are built using the module.

 ![charts](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/8/7842f8e85901f408e3995037e3772ec862683cf6.png)

---

<div class="post-metadata">

**Author:** ![zxcslo](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zxcslo/32/61610_2.png) [@zxcslo](https://forum.inductiveautomation.com/u/zxcslo)\
**Post date:** [July 22, 2021, 4:24am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/2 "2021-07-22T04:24:52Z")

</div>

Is this for Perspective or Vision?

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [July 22, 2021, 12:45pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/3 "2021-07-22T12:45:36Z")

</div>

Maker, so Perspective

---

<div class="post-metadata">

**Author:** ![kyvislabs](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kyvislabs/32/26325_2.png) [@kyvislabs](https://forum.inductiveautomation.com/u/kyvislabs)\
**Post date:** [July 22, 2021, 3:21pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/4 "2021-07-22T15:21:32Z")

</div>

Correct, this is for Perspective. It works with both Maker and non Maker licenses

---

<div class="post-metadata">

**Author:** ![kyvislabs](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kyvislabs/32/26325_2.png) [@kyvislabs](https://forum.inductiveautomation.com/u/kyvislabs)\
**Post date:** [July 22, 2021, 3:36pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/5 "2021-07-22T15:36:38Z")

</div>

Here is a link to the module, for those interested.  
[https://epgcfa0dnqmdmzu7gcoipm1alma.s3.us-west-2.amazonaws.com/ApexCharts-b2021072114.modl](https://epgcfa0dnqmdmzu7gcoipm1alma.s3.us-west-2.amazonaws.com/ApexCharts-b2021072114.modl)

---

<div class="post-metadata">

**Author:** ![sungkhum](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/sungkhum/32/10636_2.png) [@sungkhum](https://forum.inductiveautomation.com/u/sungkhum)\
**Post date:** [July 22, 2021, 3:43pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/6 "2021-07-22T15:43:40Z")

</div>

> [@kyvislabs](#):
>
> Here is a link to the module, for those interested.

Thanks!

---

<div class="post-metadata">

**Author:** ![jgooding](https://avatars.discourse-cdn.com/v4/letter/j/a88e4f/32.png) [@jgooding](https://forum.inductiveautomation.com/u/jgooding)\
**Post date:** [August 14, 2021, 2:39pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/7 "2021-08-14T14:39:12Z")

</div>

The simple charts you made can you share that project on the exchange? Your charts on the right are exactly what I want. I tried going to the apex sight to reproduce, but your module had to move some things to get it to work ([JavaScript Stacked Area Chart Sample – ApexCharts.js](https://apexcharts.com/javascript-chart-demos/area-charts/stacked/))

Or could you even paste in to the forum.

In addition, I tried going to your website to read the license agreement and it was not up. ([http://www.kyvislabs.com/](http://www.kyvislabs.com/))

Excellent job, and this is a really nice module.

---

<div class="post-metadata">

**Author:** ![kyvislabs](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kyvislabs/32/26325_2.png) [@kyvislabs](https://forum.inductiveautomation.com/u/kyvislabs)\
**Post date:** [August 16, 2021, 6:56pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/8 "2021-08-16T18:56:17Z")

</div>

The website is not active yet, and we will be providing examples and have component variants built in by default in a coming version of the module.

---

<div class="post-metadata">

**Author:** ![kyvislabs](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kyvislabs/32/26325_2.png) [@kyvislabs](https://forum.inductiveautomation.com/u/kyvislabs)\
**Post date:** [August 19, 2021, 12:58pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/9 "2021-08-19T12:58:16Z")

</div>

We have fixed a couple of bugs with the ApexCharts module, you can download the new one here:

[https://epgcfa0dnqmdmzu7gcoipm1alma.s3.us-west-2.amazonaws.com/ApexCharts-b2021081816.modl](https://epgcfa0dnqmdmzu7gcoipm1alma.s3.us-west-2.amazonaws.com/ApexCharts-b2021081816.modl)

Changes:

- Fixed issue with pie charts and radial bar
- Added pie chart variant
- Added chart events object to variants with all events set to false or disabled. Simply set to true to enable and add script in event handler.

---

<div class="post-metadata">

**Author:** ![OscarJ](https://avatars.discourse-cdn.com/v4/letter/o/e8c25b/32.png) [@OscarJ](https://forum.inductiveautomation.com/u/OscarJ)\
**Post date:** [August 23, 2021, 9:04pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/10 "2021-08-23T21:04:10Z")

</div>

How can I change the color of the graphics?

---

<div class="post-metadata">

**Author:** ![kyvislabs](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kyvislabs/32/26325_2.png) [@kyvislabs](https://forum.inductiveautomation.com/u/kyvislabs)\
**Post date:** [August 23, 2021, 10:06pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/11 "2021-08-23T22:06:05Z")

</div>

Can you be a bit more specific?

---

<div class="post-metadata">

**Author:** ![OscarJ](https://avatars.discourse-cdn.com/v4/letter/o/e8c25b/32.png) [@OscarJ](https://forum.inductiveautomation.com/u/OscarJ)\
**Post date:** [August 24, 2021, 1:02pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/12 "2021-08-24T13:02:45Z")

</div>

For example the blue color of this graph change it to green

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

---

<div class="post-metadata">

**Author:** ![kyvislabs](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kyvislabs/32/26325_2.png) [@kyvislabs](https://forum.inductiveautomation.com/u/kyvislabs)\
**Post date:** [August 24, 2021, 6:25pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/13 "2021-08-24T18:25:34Z")

</div>

Yes, you just need to add a colors array to the options property. See the documentation here:

[https://apexcharts.com/docs/options/colors/](https://apexcharts.com/docs/options/colors/)

Every property is available to set from their documentation.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [August 26, 2021, 4:11am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/14 "2021-08-26T04:11:27Z")

</div>

@kyvislabs  
Just starting to use this, looks really good so far!

Quick questions:  
~~1) I’m getting data from a tag history binding, and timestamps are therefore unix epoch timestamps. How would I display these as date times? I’ve tried setting `options.xaxis.type` to `datetime` but nothing happened  
The labels themselves show fine in the tooltip, but not on the chart when made visible~~  
This one works now… the Designer version doesn’t seem to always repaint when options are changed.

~~2) How would I show labels for particular dates/times instead? e.g. only show labels for every hour or every 6 hours?~~  
I set the xaxis.format to `HH:mm` and this has done this for me, and added the date when the midnight crossovers occur which is super cool.

Nevermind my questions… 😅

---

<div class="post-metadata">

**Author:** ![WillMT10](https://avatars.discourse-cdn.com/v4/letter/w/7feea3/32.png) [@WillMT10](https://forum.inductiveautomation.com/u/WillMT10)\
**Post date:** [August 27, 2021, 8:57pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/15 "2021-08-27T20:57:32Z")

</div>

@kyvislabs - Any chance you could share the license agreement even if the website isn’t ready yet? I can’t install this module on company resources until we fully understand the licensing agreement implications.

---

<div class="post-metadata">

**Author:** ![jgooding](https://avatars.discourse-cdn.com/v4/letter/j/a88e4f/32.png) [@jgooding](https://forum.inductiveautomation.com/u/jgooding)\
**Post date:** [August 28, 2021, 6:40pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/16 "2021-08-28T18:40:57Z")

</div>

I run it on my personnel maker server at home to test it out why I am waiting for @kyvislabs to make the license available. I wish ignition would make this one added to perspective.

The other way to do this is use the webdev module. This will allow you to use charts.js or apex.js. You have to use python to build the website, but it makes for a really responsive and cool charts. You can then use iFrames to embed the page into another page. The ability to be persistent or have the charts interact back with ingition is a littel tougher.

---

<div class="post-metadata">

**Author:** ![kyvislabs](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kyvislabs/32/26325_2.png) [@kyvislabs](https://forum.inductiveautomation.com/u/kyvislabs)\
**Post date:** [August 30, 2021, 3:20am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/17 "2021-08-30T03:20:37Z")

</div>

Hi, we will get the proper license added to the module, but it will be unrestricted for personal and corporate use.

---

<div class="post-metadata">

**Author:** ![kyvislabs](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kyvislabs/32/26325_2.png) [@kyvislabs](https://forum.inductiveautomation.com/u/kyvislabs)\
**Post date:** [September 12, 2021, 8:36pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/18 "2021-09-12T20:36:35Z")

</div>

Hi everyone! We now have the module as an open source project on Github:

> **[GitHub - Kyvis-Labs/ignition-apexcharts-module: The module provides...](https://github.com/Kyvis-Labs/ignition-apexcharts-module)**
>
> The module provides Perspective ApexCharts components - GitHub - Kyvis-Labs/ignition-apexcharts-module: The module provides Perspective ApexCharts components

Check it out and feel free to contribute. The license is Apache 2.0.

---

<div class="post-metadata">

**Author:** ![sungkhum](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/sungkhum/32/10636_2.png) [@sungkhum](https://forum.inductiveautomation.com/u/sungkhum)\
**Post date:** [September 12, 2021, 8:47pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/19 "2021-09-12T20:47:28Z")

</div>

Awesome! Thanks so much!

---

<div class="post-metadata">

**Author:** ![WillMT10](https://avatars.discourse-cdn.com/v4/letter/w/7feea3/32.png) [@WillMT10](https://forum.inductiveautomation.com/u/WillMT10)\
**Post date:** [September 15, 2021, 2:27pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/20 "2021-09-15T14:27:18Z")

</div>

I might just be missing something but I can’t seem to locate the `.modl` file. When I click on “releases” in the readme, it navigates to an empty repository.

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