the link in the readme seems to be broken:
this one is correct
2 Likes
Thanks! I didn’t even register that the readme link was taking me to a different kyvislabs…
1 Like
Hello, I have updated the link. Sorry about that.
1 Like
@kyvislabs would it be possible to add an instance of the apexchart component with ALL of the associated properties made available in the designer out of the box?
3 Likes
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 for a full list.
1 Like
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 I’m unable to get to work as a property of the chart. Can’t seem to get the syntax right. 
1 Like
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.
@kyvislabs
I can’t seem to get a bar chart with marker to work:
Also when I try to use a formatter function, the whole plot disappears.
E.g.
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}"
}
You need to put a space between function and the open parenthesis:
"formatter": "function (val, opt) {...}"
2 Likes
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
Hi @kyvislabs
I have the same problem as this topic, could you give me some solution for this:
1 Like
Issue solved with new version 1.0.6
1 Like
Continuing the discussion from Possible get more modern looking charts?:
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:
All I see is this…
I figured it out, my data series for the plot was not configured right. It should have looked like this.
And now the graph looks like this…
It was my bad. Disregard this call for help. 
Hi @kyvislabs
How can I set up a realtime chart like this example in perspective:
This is my option:
{
"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:
[
{
"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
I moved the discussion of @kyvislabs’s module out to a separate topic for a bit more clarity.
Any one can setup real-time chart with apex?
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:
{
"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):
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.
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.
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,
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.
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?
I can’t show the goals in a bar chart as shown in the demo.
I have version 1.0.7
test.zip (6.7 KB)
1 Like