# KyvisLabs ApexChart Module **URL:** \ **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:** 3
**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 4, 2022, 3:56am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/43 "2022-04-04T03:56:13Z")
Love this module! So far pretty impressed with what can be done. A major thing i was looking to Apex Charts for is the ability to have subplots, or multiple lines plotted with their own Y Axis separate from the others. This seems to be similar to the [Synchronized Charts](https://apexcharts.com/docs/chart-types/synchronized-charts/), is this possible to use in the module? I’ve tried creating two charts and linking them with the “group” property but that doesn’t seem to work. EDIT 1: Looks like it does work, which is sweet. However i’d still prefer to have one chart component with multiple plots if that is possible ---
**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:** [April 7, 2022, 8:21pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/44 "2022-04-07T20:21:32Z")
Hi Kevin After updating to 1.0.8 if I put the chart inside the nested flex container it infinitely redraws. When I install 1.0.6 again every thing works ok. ![infinite refreshing](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/9/8927d2a54166907b058a406cc922eeaf6eb05390.gif) ---
**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:** [July 14, 2022, 7:10am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/45 "2022-07-14T07:10:47Z")
Hi, is there a way to fully incorporate style classes into an Apex Chart? Currently i am making do by setting some components to use css variables where i can, so that the color changes with themes. Currently i have set my `style.backgroundColor = --neutral-20`, which sorts out that. I’m currently struggling to get the axis title text color changed, there doesn’t seem to be a property for that? Also struggling with the tooltip popup colors: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/5/a5beac21077fccbeae9cbac5ecf11f60029336d4.png) Edit 1: Found the variables i needed for axis tick labels: `xaxis.axisTicks.color`, and `axis title coloring: xaxis.title.style.color` Edit 2: Managed to do an expression Map binding based on session theme to choose between “light” and “dark” for `tooltip.theme` which did the trick for the tooltip popup. Doesn’t look too shabby now! ---
**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:** [July 26, 2022, 6:01am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/46 "2022-07-26T06:01:51Z")
Is it possible to have Combo charts with this module? Or is it possible to have multiple **x-axis** for a line chart? I can see how to configure various y-axis, but i want to plot a date time x-axis overlapping an entirely different x-axis. Which would be a “numeric” type axis. ---
**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\ **Post date:** [July 27, 2022, 7:08pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/47 "2022-07-27T19:08:31Z")
Hi guys, I’m playing with the charts and they are really amazing. I’ve just created a brush chart in this way and it works good with the browser, I cannot understand how to manage the selection, in preview mode I can do it without problem but with the browser and even with the app I cannot manage the selection. ![Annotation 2022-07-27 210643](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/d/0d3c6d04616fd7d2be548b128415478434a451ef.png) ---
**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\ **Post date:** [July 28, 2022, 6:50pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/48 "2022-07-28T18:50:38Z")
I’ve another question for you guys, I realized that I was using module versione 1.00 so I updated to 1.09. When I did this the charts stop working (area and line chart with tag history binding) showing no data (the label values was NaN). So I downgrade to 1.08, to 1.07 and in both cases they didn’t work, when I downgrade to 1.06 they start to work again in preview mode in perspective, but not neither the APP nor the browser show data in the chart. In the end I downgrade to 1.00 and everything works properly… Any suggestion? ---
**Author:** ![tamerplc](https://avatars.discourse-cdn.com/v4/letter/t/d78d45/32.png) [@tamerplc](https://forum.inductiveautomation.com/u/tamerplc)\ **Post date:** [July 29, 2022, 9:36pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/49 "2022-07-29T21:36:25Z")
add your comments in GitHub page for that module … @Travis.Cox always work on it . ---
**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\ **Post date:** [July 30, 2022, 6:27am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/50 "2022-07-30T06:27:31Z")
Thanks for the suggestion, I’ve just done it. ---
**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\ **Post date:** [August 21, 2022, 8:35am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/51 "2022-08-21T08:35:30Z")
Hi guys, I have a couple of questions for you: 1. How is possible to show only 2 data labels in a line/area chart (min and max) 2. I have views with the chart in a flex container, when I open the view the Chart doesn’t grow as the flex container but I have to refresh it (changing for example the X axis range) so to grow it as the container Thanks ---
**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:** [August 23, 2022, 3:47am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/52 "2022-08-23T03:47:41Z")
How do you guys manage to minimize white space around the charts when embedding them into small views? Especially the example first post, where a line chart is embedded into a table row? I have turned off all the labels and such that i don’t want on the axis, but i always get a bloody vertical scrollbar showing up such as this: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/f/7f416e27338d4a6479ff2969ca0a54bbd6601052.png) I am using a Flex container, with the following settings: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/a/1a28602a5c57804f7a5b18852e95329c03989c9b.png) The apex chart itself: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/f/3fc9a5233121aec370eaca20297a5228c6748f3d.png) ---
**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:** [August 23, 2022, 4:20am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/53 "2022-08-23T04:20:27Z")
The easiest way is first overflow: hidden for your parent view. Then try to play with padding and Margin : 0 for the chart. ---
**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:** [August 24, 2022, 7:46am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/54 "2022-08-24T07:46:17Z")
How can we learn more about what is available when using the event handlers? I would like to use the event: “dataPointSelection” to tell me what data element i’ve clicked. How would that be possible? For example, i’m currently working on a bar chart with 3 data series which are stacked on top of each other, and 2 data points (two bars). Data points are represented as objects in the “series[0][data] array” so i’m wanting to get the correct index of the data array for the bar i click on. ---
**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\ **Post date:** [August 26, 2022, 11:54am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/55 "2022-08-26T11:54:43Z")
Someone could help with this? Point 1. is not so important, but point 2. is a real problem. I don’t know if you have the same issue, but every time that I open a page I always have to refresh the chart so to make it grow in the flex container. 1. How is possible to show only 2 data labels in a line/area chart (min and max) 2. I have views with the chart in a flex container, when I open the view the Chart doesn’t grow as the flex container but I have to refresh it (changing for example the X axis range) so to grow it as the container Thanks ---
**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\ **Post date:** [August 31, 2022, 9:45am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/56 "2022-08-31T09:45:33Z")
I’m here to ask again your help, I’m trying to figure out how to work around the problem of the size of the chart that is not growing when I open the page, but I have to update the data to make it grow properly. The Apex Chart is in a flex container and when I open the page here is what I see: ![Cattura](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/f/4fe75c5de1e5b1c27add849d9314f8b34a48dd64.png) Once I update the chart it’s shown correctly: ![Cattura2](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/7/b715fe802969c8e727ac3a7faeee29c952e89808.png) ---
**Author:** ![james\_electriceng](https://avatars.discourse-cdn.com/v4/letter/j/ee59a6/32.png) [@james\_electriceng](https://forum.inductiveautomation.com/u/james_electriceng)\ **Post date:** [September 9, 2022, 2:59am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/57 "2022-09-09T02:59:04Z")
Thanks Richard for your help on this matter. I have worked out how to do it the themes file so you won’t need to keep doing bindings on each instance of an apexchart. ![custom theme file tooltip](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/8/88d728343dfb1bcfba214349184180ed716c02ad.png) ![custom theme result](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/4/8485f7f07b36b5401954a5d50b9dc49760b5c6c7.png) [custom theme code.txt](https://forum.inductiveautomation.com/uploads/short-url/w0QEYmAjxRiaBCwJK8M54XBLV92.txt) (141 Bytes) ---
**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:** [September 9, 2022, 3:06am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/58 "2022-09-09T03:06:25Z")
Nice, be careful with editing themes files though, as they are overwritten by Ignition when they do updates… ---
**Author:** ![james\_electriceng](https://avatars.discourse-cdn.com/v4/letter/j/ee59a6/32.png) [@james\_electriceng](https://forum.inductiveautomation.com/u/james_electriceng)\ **Post date:** [September 9, 2022, 7:26am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/59 "2022-09-09T07:26:19Z")
Yes of course, I didn’t override ignitions. I import ignitions into my own and added those lines. ---
**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 14, 2022, 7:52pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/60 "2022-09-14T19:52:04Z")
I’m trying to get a radialBar chart working, but any changes I’m making to the keys in `props.options` seemingly aren’t doing _anything_ to the chart. (I’m pressing F5 to get the chart to update, as I noticed that it wouldn’t update with new config unless you did that) Here’s my chart. For example, the options.total config isn’t doing anything; the total is not displayed even though options.total.show is `true` I’m probably doing something dumb… ```auto [ { "type": "kyvislabs.display.apexchart", "version": 0, "props": { "type": "radialBar", "series": [ 13, 1.5, 25 ], "options": { "value": { "fontSize": "10pt", "formatter": "function (val) { return (Math.round(val * 100) / 100).toFixed(2) + 'kW' }", "show": true }, "total": { "show": true, "label": "Total" }, "chart": { "type": "radialBar" }, "dataLabels": { "name": { "fontSize": "25pt", "show": false }, "formatter": "function (val) { return (Math.round(val * 100) / 100).toFixed(2) }", "show": false }, "labels": [ "Apparent Power", "Reactive Power", "Real Power" ] } }, "meta": { "name": "apexchart" }, "position": { "grow": 1, "basis": "200px" }, "custom": {} } ] ``` PS. what I _actually_ wanted to use was a stacked radialBar, but not sure if that’s possible with ApexCharts? ---
**Author:** ![schenk](https://avatars.discourse-cdn.com/v4/letter/s/6bbea6/32.png) [@schenk](https://forum.inductiveautomation.com/u/schenk)\ **Post date:** [September 14, 2022, 11:56pm UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/61 "2022-09-14T23:56:09Z")
I think you’re looking for `plotOptions`. They’re defined [here](https://apexcharts.com/docs/options/plotoptions/radialbar/#). I’m not aware of a way to get the radialBar to stack, perhaps playing with the colors of the pie/donut chart to hide the remainder of the series? Do you have an example of what you’re wanting? > **json options sample** > > ```auto > { > "chart": { > "type": "radialBar", > "width": 380, > "events": { > "animationEnd": false, > "beforeMount": false, > "mounted": false, > "updated": false, > "mouseMove": false, > "mouseLeave": false, > "click": false, > "legendClick": false, > "markerClick": false, > "selection": false, > "dataPointSelection": false, > "dataPointMouseEnter": false, > "dataPointMouseLeave": false, > "beforeZoom": false, > "beforeResetZoom": false, > "zoomed": false, > "scrolled": false, > "brushScrolled": false > } > }, > "labels": [ > "Team A", > "Team B", > "Team C", > "Team D", > "Team E" > ], > "responsive": [ > { > "breakpoint": 480, > "options": { > "chart": { > "width": 200 > }, > "legend": { > "position": "bottom" > } > } > } > ], > "plotOptions": { > "radialBar": { > "dataLabels": { > "value": { > "show": true, > "color": "var(--neutral-90)", > "formatter": "function (val) {return val + \u0027%\u0027}", > "fontSize": "32px" > }, > "show": true, > "color": "#FFF", > "name": { > "show": true > }, > "total": { > "show": true, > "fontSize": "40px", > "color": "var(--qual-2)" > } > } > } > } > } > > ``` ---
**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:59am UTC](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263/62 "2022-09-15T00:59:24Z")
> [@schenk](#): > > I think you’re looking for `plotOptions` These are what I pasted into my ApexChart in Ignition into `props.options` but they don't seem to do anything 😕 if I add a bogus one into options though, the component goes blank, so obviously it's using them. I think once I get the params to work, the radialBar will work for me without it stacking, i did also look at the donut but I had the same issue with the options not doing anything [Previous page](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263.md?page=2) [Next page](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263.md?page=4)