Apex Chart code

[Aiasa21]

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/ so to create the chart with the code instead of setting all the object in the PROPS view.

[pturmel]

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

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…

[Aiasa21]

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…

[YF129701]

This is the code your link displayed:

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.

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):

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

[Aiasa21]

@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.