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

<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:** [September 15, 2022, 1:15am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/63 "2022-09-15T01:15:02Z")

</div>

I edited the json above, not sure what I all had copied between yours and what I added, but it didn’t work for me on a newly dropped apex pie chart either… If I add a new one to the view, change the type to radialBar, copy the json above and paste it on `options` it works for me.

I’ve also found that entering/exiting preview mode updates the changes made to the apex charts.

---

<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:** [September 15, 2022, 2:03am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/64 "2022-09-15T02:03:15Z")

</div>

Ahhh, the `props.options` was confusing me, I thought that that _was_ the `plotOptions`, just named differently 😕

Your example works for me as well, thanks!

---

<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:** [September 15, 2022, 2:44am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/65 "2022-09-15T02:44:44Z")

</div>

Yeah, I should have fully qualified that as `props.options.plotOptions`, easy one to mistake.

---

<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:** [September 15, 2022, 11:52am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/66 "2022-09-15T11:52:59Z")

</div>

Ok, next question, Javascript-related. Complete Javascript n00b here…  
For the total of a RadialBar chart, how does this javascript formatter function below work to sum all of the series values up?? (edit: This explains this particular question: [Array.prototype.reduce() - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce))

1. Where does “w” come from (and where does “val” come from that I see in other examples)? I thought this might have just been some made up variable name, but nope, changing it kills the component 🙂
2. Where do I find the doco for “w” and “val” for its methods and properties?
3. Are there any other variables (or arguments, or whatever they are in javascript) available?
4. I assume `=>` is some sort of pipe? Edit: nope, this defines an “arrow function”, [Arrow function expressions - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)

```auto
function (w) { return w.globals.seriesTotals.reduce((a, b) => { return a + b }, 0) + ' kW' }

```

Edit:  
I found this, but it’s vague and doesn’t fully document everything… still trying to find the full doco for it!!

> **[dataLabels – ApexCharts.js](https://apexcharts.com/docs/options/datalabels/#formatter)**
>
> dataLabels: { enabled: true, enabledOnSeries: undefined, formatter: function (val, opts) { return val }, textAnchor: 'middle', distributed: false, offsetX: 0, offsetY: 0, style: { fontSize: '14px', fontFamily: 'Helvetica, Arial, sans-serif',...

```auto
formatter: function(val, opts)
The formatter function allows you to modify the value before displaying Example:

  formatter: function(value, { seriesIndex, dataPointIndex, w }) {
    return w.config.series[seriesIndex].name + ": " + value
  }

In the code above, seriesIndex is useful in multi-series chart, while dataPointIndex is the index of data-point in that series. w is an object consisting all globals and configuration which can be utilized the way mentioned in the above code.

```

---

<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:** [September 15, 2022, 12:42pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/67 "2022-09-15T12:42:28Z")

</div>

Addtionally, how can I change the max of the radialBar from 100 to something else? 🤔

Edit: That’s a no, derp… it looks like I’ll have to convert the series values to % and then convert them back into real values by reversing the formula in the values display formatter

> <https://github.com/apexcharts/apexcharts.js/issues/449>
>
> I'd like to set a min and max values to radial bar chart.
> Currently the min val…ue is 0 and max value is 100, It would be nice if I could customize the min and max values like min 1000 and max 3000

Edit:  
Hmm, it doesn’t look like I can bind to a formatter. I have a feeling the chart initialises and uses the formatter that the chart initially has and if this changes by binding, it’s not then updated in the actual chart. I think I would need to call an update on the chart to re-initialise it which I can’t do without having access to such a method via the module ☹ I wanted to use this in a dashboard component so I need the formatter to be created based on what it’s being used for… Any ideas?

---

<div class="post-metadata">

**Author:** ![louagejasper](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/louagejasper/32/86311_2.png) [@louagejasper](https://forum.inductiveautomation.com/u/louagejasper)\
**Post date:** [October 11, 2022, 12:46pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/68 "2022-10-11T12:46:28Z")

</div>

@nader.chinichian @kyvislabs,

Did you find a solution for this? I am still facing this problem using 8.1.20 and 1.0.9.

---

<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:** [October 11, 2022, 2:06pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/69 "2022-10-11T14:06:06Z")

</div>

Hi Jasper,  
Not until now for me.

---

<div class="post-metadata">

**Author:** ![jd1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jd1/32/18928_2.png) [@jd1](https://forum.inductiveautomation.com/u/jd1)\
**Post date:** [October 20, 2022, 5:23pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/70 "2022-10-20T17:23:09Z")

</div>

I am struggling to get the line graph to work with a basic tag history binding. I am running 8.1.18 and 1.0.9 of the apex module. Below is my config and then the resulting chart.

 ![Screenshot 2022-10-20 101003](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/e/4e23f7fa501d12300d5c76c426ff5c878963a825.png)  
 ![Screenshot 2022-10-20 100919](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/3/23e93ec00650f21139c8c2d3a8e1b078a9eaa946.png)

---

<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:** [October 24, 2022, 5:33am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/71 "2022-10-24T05:33:26Z")

</div>

Bug report:  
When the trial version finish if I open a view that include APEX chart with history binding for data, the view is getting very slow and freeze.

---

<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:** [October 27, 2022, 9:23am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/72 "2022-10-27T09:23:54Z")

</div>

Can you show your data binding?

---

<div class="post-metadata">

**Author:** ![jd1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jd1/32/18928_2.png) [@jd1](https://forum.inductiveautomation.com/u/jd1)\
**Post date:** [October 27, 2022, 4:05pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/73 "2022-10-27T16:05:08Z")

</div>

![Screenshot 2022-10-27 100341](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/5/d5c07bff913fdcd961222e26fbc776d40fe22124.png)  
It is just a basic tag history binding

---

<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:** [October 28, 2022, 7:02am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/74 "2022-10-28T07:02:39Z")

</div>

Try to change the Value Format to DOCUMENT and add a script transform like this

```auto
return [[row['t_stamp'], row['tag_name']] for row in value]

```

I had the same problem and here the guys helped me to solve it  
[https://forum.inductiveautomation.com/t/apex-chart-problem-with-tag-history-formatting/62751](https://forum.inductiveautomation.com/t/apex-chart-problem-with-tag-history-formatting/62751)

---

<div class="post-metadata">

**Author:** ![jd1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jd1/32/18928_2.png) [@jd1](https://forum.inductiveautomation.com/u/jd1)\
**Post date:** [November 9, 2022, 7:23pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/75 "2022-11-09T19:23:28Z")

</div>

Another question on this module. Under options\>chart\>events there is an option for a "beforeResetZoom" event, however when I go to set up a component event that is not one of the options. I am missing something or has that event just not been added. If it is the latter, if there anyway somewhy has come with to know when the zoom level has been reset?

---

<div class="post-metadata">

**Author:** ![Maxime\_Mouray](https://avatars.discourse-cdn.com/v4/letter/m/c89c15/32.png) [@Maxime\_Mouray](https://forum.inductiveautomation.com/u/Maxime_Mouray)\
**Post date:** [January 13, 2023, 4:00pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/76 "2023-01-13T16:00:45Z")

</div>

Hi,

First of all I want to thank you for this great module.

I currently try to use a "treemap" chart to display different defects on a machine (according to the impact time). Unfortunately, I meet a difficulty.

When I set up the graph and add a data series (as shown in the Apex documentation), only one data point is displayed (without the label or value).

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

Does anyone know how to solve the problem?

Thank you in advance

---

<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:** [January 17, 2023, 7:11am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/77 "2023-01-17T07:11:34Z")

</div>

Hi  
I try to replicate a real-time chart in Apexchart like the following without any success.

> **[JavaScript Realtime Chart Example – ApexCharts.js](https://apexcharts.com/javascript-chart-demos/line-charts/realtime/)**
>
> View the example of a JavaScript realtime line chart that updates every 2 seconds. Checkout the sample code for it included along with the example.

![Realtime chart](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/0/701e2c25a1c6153e05b473977cb550dd82116162.gif)

Does anyone do this before?

---

<div class="post-metadata">

**Author:** ![siim\_suitslepp](https://avatars.discourse-cdn.com/v4/letter/s/e9bcb4/32.png) [@siim\_suitslepp](https://forum.inductiveautomation.com/u/siim_suitslepp)\
**Post date:** [March 14, 2023, 7:39am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/78 "2023-03-14T07:39:51Z")

</div>

I have been messing around made some good looking graphs, ty for the developers. However I have been having some problems with launching it from a gateway which is on a remote linux gateway.

When launching the session from gateway (no IP in URL) then I get a following error:  
"/res/kyvislabs/Components.css?no\_cache=1678455960141"

However when I start session from the designer, everything works fine.

I have tried to restart the Gateway to update path, but no success. Gateway version is 8.1.25

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

Any ideas?

Edit 1:

Basically the session doesn't load in the resource from the server (taken from server)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/e/4ea3ba0f87a790d1ffc055b00bb5568d39ddc12d.png)

(taken from local session)

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

What is the reason the session can't load in the resource?

---

<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:** [April 4, 2023, 5:53am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/79 "2023-04-04T05:53:51Z")

</div>

@kyvislabs This might be good to add into the OP.  
PSA: the simplest way to make a chart is to use the online Apex Chart editor:

> **[ApexCharts Editor - Online Graph Maker](https://editor.apexcharts.com/)**

Copy the code output of this into `props.options` in the Ignition component, and make sure you change the `props.type` to the right chart type

Edit: is @kyvislabs still around?? maybe @paul-griffith or someone from IA can add this link and brief description of how to use it into the OP? 🤷‍♂️

**Edit2: This tool no longer seems to give you the chart configuration options to copy any more** …

---

<div class="post-metadata">

**Author:** ![SamDonche](https://avatars.discourse-cdn.com/v4/letter/s/3ab097/32.png) [@SamDonche](https://forum.inductiveautomation.com/u/SamDonche)\
**Post date:** [April 4, 2023, 9:07am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/80 "2023-04-04T09:07:03Z")

</div>

Seems like a good tool, thanks @nminchin

---

<div class="post-metadata">

**Author:** ![martin.johansson](https://avatars.discourse-cdn.com/v4/letter/m/7feea3/32.png) [@martin.johansson](https://forum.inductiveautomation.com/u/martin.johansson)\
**Post date:** [April 12, 2023, 8:16am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/81 "2023-04-12T08:16:30Z")

</div>

Hi!

Just found this and I think it's great! Solves a few issues that I have with the built in charts.

Though I have a few issuse with this as well. After some searching I noticed that it seems like these are fixed in version 3.37 (in perticular this one: [#3483 Fix x-axis tick alignment](https://github.com/apexcharts/apexcharts.js/pull/3505#event-7870567734)).

When do you think this will get merged into the module?

---

<div class="post-metadata">

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

</div>

Is there anyway to display the annotations from the tag historian on an apex chart? There is some functionality and customization that I need that seems to be lacking in the Perspective Power Chart.

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

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