Apex Chart code

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.

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:

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…

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.

image

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
 }

image

1 Like

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