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

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [September 15, 2021, 2:34pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/21 "2021-09-15T14:34:04Z")

</div>

the link in the readme seems to be broken:  
this one is correct

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

---

<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:37pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/22 "2021-09-15T14:37:37Z")

</div>

Thanks! I didn’t even register that the readme link was taking me to a different kyvislabs…

---

<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 15, 2021, 3:21pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/23 "2021-09-15T15:21:06Z")

</div>

Hello, I have updated the link. Sorry about that.

---

<div class="post-metadata">

**Author:** ![dustin.cooper](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dustin.cooper/32/29963_2.png) [@dustin.cooper](https://forum.inductiveautomation.com/u/dustin.cooper)\
**Post date:** [October 1, 2021, 4:06pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/24 "2021-10-01T16:06:08Z")

</div>

@kyvislabs would it be possible to add an instance of the apexchart component with ALL of the [associated properties](https://apexcharts.com/docs/options/) made available in the designer out of the box?

---

<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:** [October 1, 2021, 5:19pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/25 "2021-10-01T17:19:25Z")

</div>

Hi Dustin,  
Every chart type has different properties that they can use, and there is an overlap of certain properties, formatting being an example. There are a few different ways to format labels, as an example, and having more than one method would have unexpected outputs. We are working on adding more chart variants, outside of the three provided currently, but we will not be able to add every property available in Apex Charts. Please check the options tab at [https://apexcharts.com/docs](https://apexcharts.com/docs) for a full list.

---

<div class="post-metadata">

**Author:** ![dustin.cooper](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dustin.cooper/32/29963_2.png) [@dustin.cooper](https://forum.inductiveautomation.com/u/dustin.cooper)\
**Post date:** [October 3, 2021, 2:21am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/26 "2021-10-03T02:21:14Z")

</div>

Is it possible to use the `options.dataLabels.formatter` property within Ignition? And if so, do you have any examples or sample code? The examples at [dataLabels – ApexCharts.js](https://apexcharts.com/docs/options/datalabels/) I’m unable to get to work as a property of the chart. Can’t seem to get the syntax right. 🤷‍♂️

---

<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:** [October 4, 2021, 1:24pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/27 "2021-10-04T13:24:06Z")

</div>

Hi Dustin,  
Yes, you can use the formatter property. You will provide a string that begins with “function (” and it should work as long as the string is valid javascript.

---

<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:** [November 5, 2021, 2:15am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/28 "2021-11-05T02:15:19Z")

</div>

@kyvislabs  
I can’t seem to get a bar chart with marker to work:

> **[React Bar Chart with Markers – ApexCharts.js](https://apexcharts.com/react-chart-demos/bar-charts/bar-with-markers/)**
>
> View the sample of a React Bar Chart with Markers created using ApexCharts.js

Also when I try to use a formatter function, the whole plot disappears.  
E.g.

```auto
options.dataLabels:

{
  "formatter": "function(val, opt) {\n const goals \u003d opt.w.config.series[opt.seriesIndex].data[opt.dataPointIndex].goals\n if (goals \u0026\u0026 goals.length) {\n return `${val} / ${goals[0].value}`\n }\n return val\n}"
}

```

---

<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:** [November 8, 2021, 8:43pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/29 "2021-11-08T20:43:52Z")

</div>

You need to put a space between function and the open parenthesis:

```auto
"formatter": "function (val, opt) {...}"

```

---

<div class="post-metadata">

**Author:** ![declan.mccarthy](https://avatars.discourse-cdn.com/v4/letter/d/dec6dc/32.png) [@declan.mccarthy](https://forum.inductiveautomation.com/u/declan.mccarthy)\
**Post date:** [December 9, 2021, 5:21pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/30 "2021-12-09T17:21:37Z")

</div>

Hi many thanks for these great charts. Is it possible to save them as a svg via scripting? I would like to show them in a report

---

<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:** [December 29, 2021, 1:58pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/31 "2021-12-29T13:58:32Z")

</div>

Hi @kyvislabs

I have the same problem as this topic, could you give me some solution for this:

> [@Apex Module Line Chart](https://forum.inductiveautomation.com/t/apex-module-line-chart/54485):
>
> i noticed Apex line chart loaded after user interaction on the view ? did any once face same issue ? i tested with different Ignition versions ( 11,12,13) and all are same issue . i am using Apex Module version(1.0.5) [Releases · Kyvis-Labs/ignition-apexcharts-module · GitHub](https://github.com/Kyvis-Labs/ignition-apexcharts-module/releases) [eyCU8tlhYy]

---

<div class="post-metadata">

**Author:** ![tamerplc](https://avatars.discourse-cdn.com/v4/letter/t/d78d45/32.png) [@tamerplc](https://forum.inductiveautomation.com/u/tamerplc)\
**Post date:** [January 8, 2022, 1:20pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/32 "2022-01-08T13:20:47Z")

</div>

Issue solved with new version 1.0.6

---

<div class="post-metadata">

**Author:** ![andrew.brauer](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/andrew.brauer/32/34853_2.png) [@andrew.brauer](https://forum.inductiveautomation.com/u/andrew.brauer)\
**Post date:** [January 18, 2022, 8:42pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/33 "2022-01-18T20:42:40Z")

</div>

Continuing the discussion from [Possible get more modern looking charts?](https://forum.inductiveautomation.com/t/possible-get-more-modern-looking-charts/41467/58):

Hi @kyvislabs ,  
~~I am unable to generate a line graph.~~ I am using Ignition v8.1.13 with Apex module version v1.0.6. I am trying to pass in time-series data. ~~I am not sure what is wrong.~~ I tried to configure it similar to the examples on the Apex Chart website.

Here’s my bad configuration for x-axis and the series data:

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

All I see is this…

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

I figured it out, my data series for the plot was not configured right. It should have looked like this.

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

And now the graph looks like this…

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

It was my bad. Disregard this call for 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:** [January 21, 2022, 9:53am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/34 "2022-01-21T09:53:54Z")

</div>

Hi @kyvislabs

How can I set up a realtime chart like this example in perspective:

> **[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.

This is my option:

```auto
{
  "chart": {
    "animations": {
      "enabled": true,
      "dynamicAnimation": {
        "speed": 1000
      },
      "easing": "linear"
    },
    "toolbar": {
      "show": false
    },
    "zoom": {
      "enabled": false
    },
    "id": "realtime"
  },
  "dataLabels": {
    "enabled": false
  },
  "stroke": {
    "curve": "smooth",
    "colors": [
      "#4E93EF"
    ],
    "width": 3
  },
  "title": {
    "align": "left",
    "text": "Usage Of Last day Electricity",
    "style": {
      "color": "var(--color-label-0)",
      "fontFamily": "D-DIN",
      "fontSize": 20,
      "fontWeight": 300
    }
  },
  "xaxis": {
    "type": "datetime",
    "range": "XAXISRANGE",
    "style": {
      "colors": "var(--color-label-2)",
      "cssClass": "",
      "fontFamily": "D-DIN"
    }
  },
  "yaxis": {
    "decimalsInFloat": false,
    "labels": {
      "align": "right",
      "style": {
        "colors": "var(--color-label-2)",
        "cssClass": "",
        "fontFamily": "D-DIN"
      }
    },
    "opposite": true
  },
  "legend": {
    "show": false
  },
  "markers": {
    "size": 0
  },
  "grid": {
    "show": false
  }
}

```

And this is my series which update every 1000ms:

```auto
[
  {
    "name": "series1",
    "data": [
      [
        1642758175649,
        100.64637732291578
      ],
      [
        1642758235649,
        99.96063483725804
      ],
      [
        1642758295649,
        99.75720841379932
      ],
      [
        1642758355649,
        99.70234854319322
      ],
      [
        1642758415649,
        100.40226262689424
      ],
      [
        1642758475649,
        97.72023033746112
      ],
      [
        1642758535649,
        90.81506283022537
      ],
      [
        1642758595649,
        109.1276302962466
      ],
      [
        1642758655649,
        100.39518823383962
      ],
      [
        1642758715649,
        98.90919763837154
      ]
    ]
  }
]

```

It seems when I use range: XAXISRANGE cause problem and if I delete it the chart will run like realtime

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [January 21, 2022, 5:47pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/35 "2022-01-21T17:47:59Z")

</div>

I moved the discussion of @kyvislabs’s module out to a separate topic for a bit more clarity.

---

<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 24, 2022, 3:41pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/36 "2022-01-24T15:41:27Z")

</div>

Any one can setup real-time chart with apex?

---

<div class="post-metadata">

**Author:** ![thewebpleb](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/thewebpleb/32/27415_2.png) [@thewebpleb](https://forum.inductiveautomation.com/u/thewebpleb)\
**Post date:** [January 31, 2022, 3:19pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/37 "2022-01-31T15:19:12Z")

</div>

Hi @nader, you said you’re updating the series every 1000ms… Is this a tag history binding or are you updating the series using an expression or script transform?

I saw this post on Friday and with a little bit of playing around with the chart and reading the docs, I was able to get a trivial realtime chart working.

Here is `options`:

```json
{
  "chart": {
    "animations": {
      "dynamicAnimation": {
        "speed": 1000
      },
      "easing": "linear",
      "enabled": true
    },
    "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,
    "id": "realtime",
    "toolbar": {
      "show": false
    },
    "type": "line",
    "zoom": {
      "enabled": false
    }
  },
  "colors": [
    "#77B6EA"
  ],
  "dataLabels": {
    "enabled": false
  },
  "legend": {
    "floating": true,
    "horizontalAlign": "right",
    "offsetX": -5,
    "offsetY": -25,
    "position": "top",
    "show": false
  },
  "markers": {
    "size": 1
  },
  "stroke": {
    "curve": "smooth"
  },
  "title": {
    "align": "left",
    "text": "Dynamic Updating Chart"
  },
  "xaxis": {
    "categories": [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul"
    ],
    "title": {
      "text": "Month"
    }
  },
  "yaxis": {
    "max": 100,
    "min": 0,
    "title": {
      "text": "Temperature"
    },
    "tickAmount": 5,
    "forceNiceScale": true
  }
}

```

Then, on the `series[i].data` property, I have a tag history binding (using the Tag Historian Simulator):

 ![unknown](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/2/62c6cd18d9a245a07921bb9fde211fa5c7d42b10.png)

With those two pieces of information, I was able to get a real-time graph which updated every second. Obviously, this is a sloppy example, I didn’t even change the `x-axis` or `y-axis` labels or markers, for instance.

[https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/e/1eb0cee8284b38b0e266669d9eb0d923d4cf38f9.mp4](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/e/1eb0cee8284b38b0e266669d9eb0d923d4cf38f9.mp4)

---

<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 31, 2022, 3:59pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/38 "2022-01-31T15:59:38Z")

</div>

As you did I also did the same and as you see there is weird and unpleasant small wave and distortion in trend shape every time the chart is updated.  
What I really want the same result and performance as demo example in apex chart.  
It actually move trend shape with out any distortion on it.

---

<div class="post-metadata">

**Author:** ![Adrian\_Bravo](https://avatars.discourse-cdn.com/v4/letter/a/6a8cbe/32.png) [@Adrian\_Bravo](https://forum.inductiveautomation.com/u/Adrian_Bravo)\
**Post date:** [February 5, 2022, 6:22pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/39 "2022-02-05T18:22:56Z")

</div>

Hi All, cheers from Chile.

Great module. Thanks for your work @kyvislabs

Really like the customization and possibilities with the module.

I have been playing with this and got it working,

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

However, i dont know if it’s due to my lack of knowledge, but i normally use charts with a LOT of data points ( for example: 345 cols (tags) x 672 rows (7 days, 15 min period) ) and due to the structure of the series in the ApexChart module, i get more inefficient results because i have to perform a script and query for each one of the tags, and each query comes with a timestamp. So it uses other timestamp data on each serie, ending with 344 additional timestamp cols, additional to the CPU ussage for the separate querys. Resulting in longer loading times.

On Perspective TimeSeries Chart (aka AmCharts) i can do a history “expression” tags binding and perform only one query that shares timestamp between all tags, being more efficient.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/7/a77bba56ba951bcb951c10cd34ad52fc04031608.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/1/c1e8fd43acfc38f6658468a63fab491dea0511dc.png)  
Here is a little example for 2 tag x 1 day between the two options, you get the idea.

Maybe i am doing it in a not so good way? Do you have suggestions?

---

<div class="post-metadata">

**Author:** ![lachguerabdallah](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lachguerabdallah/32/25558_2.png) [@lachguerabdallah](https://forum.inductiveautomation.com/u/lachguerabdallah)\
**Post date:** [February 20, 2022, 1:30pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/42 "2022-02-20T13:30:48Z")

</div>

I can’t show the goals in a bar chart as shown in the demo.  
I have version 1.0.7

> **[JavaScript Column Chart with Markers – ApexCharts.js](https://apexcharts.com/javascript-chart-demos/column-charts/column-with-markers/)**
>
> View the sample of a JavaScript Column Chart with Markers created using ApexCharts.js

[test.zip](https://forum.inductiveautomation.com/uploads/short-url/4SA9s4y1lCZHqaBbE7zADPeeakm.zip) (6.7 KB)

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

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