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

<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:** [July 21, 2023, 9:38pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/103 "2023-07-21T21:38:35Z")

</div>

Ran a quick test on my 8.1.28 gateway and seemed to work fine. Might be conflicting with some other property you have set on the charts that isn't visible in your clip? I just took the built in line chart example and only modified them enough to have two synchronized charts and the yaxis settings to match what you're showing:

 ![Screenshot 2023-07-21 at 5.36.47 PM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/9/59c208af00c62bca1f5a2e1214e7c2c6331486c4.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:** [July 23, 2023, 5:43pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/104 "2023-07-23T17:43:29Z")

</div>

Interesting, I use 1.0.14 with 8.1.29, could you test it in your end.

[Apex.zip](https://forum.inductiveautomation.com/uploads/short-url/rfZ8TQWKOHTmUhUVXEWJMGdgVCJ.zip) (26.0 KB)

---

<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:** [July 24, 2023, 3:40am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/105 "2023-07-24T03:40:43Z")

</div>

Pretty sure the root of your issue is that you are naming your xy value keys in an unsupported way with the `t_stamp / realistic` key names. [See here](https://apexcharts.com/docs/series/) for supported formats and key names for the series data array.

This will also prevent unexpected behavior because when the key name is not recognized, the charts will default to interpreting which value is the x and which value is the y based on the order of the values. Since objects don't hold order on export/import, you can get the order to flip which is what happened with your export when I imported into my own gateway (`t_stamp` was shown on the y-axis and `realistic` was shown on the x-axis).

Last note, `decimalsInFloat` is not a boolean property. [Should be an integer.](https://apexcharts.com/docs/options/yaxis/#decimalsInFloat)

---

<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 24, 2023, 4:07am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/106 "2023-07-24T04:07:36Z")

</div>

> [@nader.chinichian](#):
>
> tickAmount

I follow this as you told me but it is not working with Timeline Series:  
series: [{  
data: [[1324508400000, 34], [1324594800000, 54] , ... , [1326236400000, 43]]  
}]

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

This problem is related to only data with Timeline Series. Also, Travis adds support directly to use history binding which is why I use it in the first place.

---

<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:** [July 24, 2023, 4:41pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/107 "2023-07-24T16:41:01Z")

</div>

When I convert the data array to use the `x` and `y` key names, it works for me. I also noticed that `tickAmount` gives some very weird behavior when you have as many decimal places as your values have. I did a quick script to round all values to 2 decimals and `tickAmount` then worked as expected:

 ![Screenshot 2023-07-24 at 12.38.50 PM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/d/0d7afdfec8a4828e6220856bea7e8f10385cd12f.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:** [July 24, 2023, 5:22pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/108 "2023-07-24T17:22:30Z")

</div>

Good workaround but it is definitely is a bug for t\_stamp.  
What version do you use?

---

<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:** [July 24, 2023, 5:30pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/109 "2023-07-24T17:30:54Z")

</div>

What's the t\_stamp bug? That you can't use it as a key name?

Same as you for the ApexCharts module: 1.0.14  
Still on 8.1.28 for Ignition though since 8.1.29 was pulled due to a regression and 8.1.30 is still too new for me to bother with yet.

---

<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 25, 2023, 4:07am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/110 "2023-07-25T04:07:51Z")

</div>

I mean that when you need to round up value when using time series data that come from history binding.  
Check out this:

> **[Release 1.0.10: Upgraded Apex Charts and Fixed Bugs ·...](https://github.com/Kyvis-Labs/ignition-apexcharts-module/releases/tag/1.0.10)**
>
> Upgraded Apex Charts to version 3.36.0
> Fixed issue with brush charts
> Refactored to adjust series data automatically if not in the correct format, especially from Ignition's tag historian queries
> Fi...

> Refactored to adjust series data automatically if not in the correct format, especially from Ignition's tag historian queries.

It should be work but it doesn't

---

<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:** [July 25, 2023, 3:14pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/111 "2023-07-25T15:14:51Z")

</div>

I would think that there is a good chance that the bug with `tickAmount` not working as expected when there are too many decimal places is a bug within the Apex Charts library, not the Ignition module. But maybe not, just guessing.

---

<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 25, 2023, 3:18pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/112 "2023-07-25T15:18:06Z")

</div>

Luckily, we have Travis Cox and he supporting and updating the module.

---

<div class="post-metadata">

**Author:** ![John\_Morgan1](https://avatars.discourse-cdn.com/v4/letter/j/22d042/32.png) [@John\_Morgan1](https://forum.inductiveautomation.com/u/John_Morgan1)\
**Post date:** [September 12, 2023, 4:47am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/113 "2023-09-12T04:47:15Z")

</div>

Hi folks I have a little problem with displaying real-time data  
@pturmel @nader.chinichian @bmusson helped me a lot to reach that result but I can't overcome the snap-shot style displaying graph

[https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/5/654c56be6319dd0331d1f6d0528276cb28c9ef89.mp4](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/5/654c56be6319dd0331d1f6d0528276cb28c9ef89.mp4)

```auto
{
  "chart": {
    "animations": {
      "dynamicAnimation": {
        "speed": 1000
      },
      "easing": "linear",
      "enabled": true
    },
    "dropShadow": {
      "blur": 5,
      "color": "#52AFDE",
      "enabled": true,
      "opacity": 0.7
    },
    "toolbar": {
      "show": false
    },
    "zoom": {
      "enabled": false
    }
  },
  "colors": [
    "#77B6EA",
    "#545454"
  ],
  "dataLabels": {
    "enabled": true
  },
  "grid": {
    "borderColor": "#e7e7e7",
    "row": {
      "colors": [
        "#f3f3f3",
        "transparent"
      ],
      "opacity": 0.5
    }
  },
  "legend": {
    "floating": true,
    "horizontalAlign": "right",
    "offsetX": -5,
    "offsetY": -25,
    "position": "top"
  },
  "markers": {
    "size": 1
  },
  "stroke": {
    "curve": "smooth"
  },
  "title": {
    "align": "center",
    "text": "Tank Level"
  },
  "xaxis": {
    "title": {
      "text": ""
    },
    "categories": [
      "46:49",
      "46:50",
      "46:51",
      "46:52",
      "46:53",
      "46:54",
      "46:55",
      "46:56"
    ]
  },
  "yaxis": {
    "max": 100,
    "min": 70,
    "title": {
      "text": "Filling %"
    }
  }
}

```

The X-Axis has a query binding that gets time with a script transform that changes format

If anyone can help I would appreciate it a lot  
@thewebpleb @kyvislabs

---

<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:** [September 12, 2023, 1:51pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/114 "2023-09-12T13:51:54Z")

</div>

1. What exactly are you binding to your series data?

2. What is going on with your X-axis categories? Where are those values coming from and what are you trying to do?

---

<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 22, 2023, 3:52pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/115 "2023-10-22T15:52:05Z")

</div>

Hi @kyvislabs and @Travis.Cox,

Is it possible for you guys to kindly add the supporting "module" arg to the chart "props"?

Like the Following code. Here I use the "Selection" module and pass it to the modules arg to support the multi-selection option to the Apexchart.

```auto
// Import ApexCharts and the selection module if you are using ES6 modules
import ApexCharts from 'apexcharts';
import { Selection } from 'apexcharts';

const chartData = {
  // This come from Perspective with "series" Property
};

const chartOptions = {
// This come from Perspective with "options" Property
};

// Create the chart instance
const chart = new ApexCharts(document.querySelector('#chart'), {
  series: chartData,
  options: chartOptions,
  modules: [Selection],
});

// Render the chart
chart.render();

```

---

<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, 2023, 10:05am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/116 "2023-10-24T10:05:51Z")

</div>

For those who are interested in multi-select date items use the following object in the options:

I find the solution for this by using the state object in options:

```auto
{
"active": {
"allowMultipleDataPointsSelection": true,
"filter": {
"type": "darken",
"value": 0.2
}
}
}

```

---

<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 26, 2023, 7:34pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/117 "2023-10-26T19:34:20Z")

</div>

Hi

Does anyone see this strange behavior for mobile mode in the browser:  
When opening the web browser and going to mobile mode the Bar chart and Pie chart scale incorrectly, but in designer with the same width they render correctly.  
Also in normal sizes in the Browser, these two charts are OK.  
Other charts are totally fine in any mode.  
I test in v1.0.14, 1.0.15 and 1.0.16.

Here are some screenshots to explain this problem:

Mobile:

 ![mobile](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/8/e88598ec4a528d325acef2ab1b809b5d343e08d3.jpeg)

Designer:

 ![designer](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/1/615ee10f5b36a5f2226ac4f636ef3205028269f3.jpeg)

Desktop in Web:

 ![Desktop](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/5/f551fb0e2d1edf423302a1c441d077bedb57cfe8.jpeg)

---

<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:** [October 27, 2023, 9:34pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/118 "2023-10-27T21:34:24Z")

</div>

Your issues aside, that's an amazing dashboard (UI design) and a cool project idea!

---

<div class="post-metadata">

**Author:** ![BenInReno](https://avatars.discourse-cdn.com/v4/letter/b/8edcca/32.png) [@BenInReno](https://forum.inductiveautomation.com/u/BenInReno)\
**Post date:** [November 1, 2023, 5:40pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/119 "2023-11-01T17:40:42Z")

</div>

The enableOnSeries property of dataLabels doesn't work in our project. Whether I use it or not, the values for all series are displayed on the chart. How can I get the chart to only display the values for one series? 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:** [November 1, 2023, 5:53pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/120 "2023-11-01T17:53:53Z")

</div>

It should be `enabledOnSeries`  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/7/17528159cab99279da94e614a767a5babf0f3521.png)

---

<div class="post-metadata">

**Author:** ![BenInReno](https://avatars.discourse-cdn.com/v4/letter/b/8edcca/32.png) [@BenInReno](https://forum.inductiveautomation.com/u/BenInReno)\
**Post date:** [November 1, 2023, 6:03pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/121 "2023-11-01T18:03:34Z")

</div>

Ah! I was entering the series index array as a 'value' (enabledOnSeries: [1]) rather than selecting 'Array' and entering the series index below. Thanks a lot!

---

<div class="post-metadata">

**Author:** ![msteele](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/msteele/32/77889_2.png) [@msteele](https://forum.inductiveautomation.com/u/msteele)\
**Post date:** [November 4, 2023, 4:18pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/122 "2023-11-04T16:18:45Z")

</div>

@nader.chinichian dropped a vid with this UI earlier today: [https://www.youtube.com/watch?v=mXJTkBjc-w8](https://www.youtube.com/watch?v=mXJTkBjc-w8)

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

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