# Apex Chart code

**URL:** <https://forum.inductiveautomation.com/t/apex-chart-code/62741>\
**Category:** Ignition\
**Created:** [August 6, 2022, 9:17am UTC](https://forum.inductiveautomation.com/t/apex-chart-code/62741 "2022-08-06T09:17:44Z")\
**Posts on this page:** 5\
**Page:** 1

<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:** [August 6, 2022, 9:17am UTC](https://forum.inductiveautomation.com/t/apex-chart-code/62741/1 "2022-08-06T09:17:44Z")

</div>

Good morning,  
probably is a stupid question, but I’m playing with apex charts and I cannot understand where I should enter the code like this for example [https://apexcharts.com/docs/creating-first-javascript-chart/](https://apexcharts.com/docs/creating-first-javascript-chart/) so to create the chart with the code instead of setting all the object in the PROPS view.

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [August 6, 2022, 2:41pm UTC](https://forum.inductiveautomation.com/t/apex-chart-code/62741/2 "2022-08-06T14:41:46Z")

</div>

Perspective doesn't allow you to supply your own javascript in the designer. Only a component supplied by a 3rd-party module can add browser-side javascript.

For ApexCharts, this has been done by Kyvis Labs:

> [@KyvisLabs ApexChart Module](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263):
>
> Hello All, We have been working on a few modules lately, one of them being an Apex Charts module. We have been using this module for certain clients for the last few months, and in a few home automation systems, mine included. We will be releasing the source code for these modules in the coming weeks, just working on a website and the github. Commercial support is also available through an integration partner. There are a few variants in the component tree already, and I can answer any que…

---

<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:** [August 6, 2022, 3:59pm UTC](https://forum.inductiveautomation.com/t/apex-chart-code/62741/3 "2022-08-06T15:59:57Z")

</div>

Thanks for the answer, I was actually reading that topic and I saw that others users used their own script to manage the apex chart with perspective, but I cannot understand where they insert that code…

---

<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:** [August 8, 2022, 3:10pm UTC](https://forum.inductiveautomation.com/t/apex-chart-code/62741/4 "2022-08-08T15:10:15Z")

</div>

This is the code your link displayed:

```auto
var options = {
  chart: {
    type: 'line'
  },
  series: [{
    name: 'sales',
    data: [30,40,35,50,49,60,70,91,125]
  }],
  xaxis: {
    categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
  }
}

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();

```

Instead of defining a chart this way, drop an Apex Chart unto your view in the Designer. Go to the Property Editor and mimic the structure you see in the `options` variable.

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

Regarding @pturmel’s point, you actually can use JS to format certain fields (you would add the property and then insert the JS function as text):

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

```

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

---

<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:** [August 9, 2022, 11:29am UTC](https://forum.inductiveautomation.com/t/apex-chart-code/62741/5 "2022-08-09T11:29:06Z")

</div>

@YF129701, thanks for the answer, this is very interesting because I was trying to implement the auto Y based on the min and max value of the data and this help me.