NPM Packs for Chart

Ask the community
,
11

@paul51482 Here is one way to get the basic example up and running.

In your Dashboard > Settings, place the apex charts CDN like so. Make sure it is in the head and loading on whatever page you are rendering the chart

1278×1450 81 KB

Next you need to create a custom element which must be located in the Public area and in a folder called custom-elements

Inside the file, you may start with this code. You will want to adjust for your use case.

const createInputElement = () => {
  const div = document.createElement('div');
  const html =  `<div id="chart"></div>`;
    div.innerHTML = html;
  return div;
};

class ApexChartRender extends HTMLElement {
  
  connectedCallback() {
    
      this.appendChild(createInputElement());
   
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();

  }
}

 customElements.define('apex-chart',  ApexChartRender);

Then add the custom element from the “+” Embeds > Custom element and set the source to your JS file and the tag name to whatever you define. In the example above it is ‘apex-chart’

582×662 29.7 KB

You will need to publish the site and look at the live version to see the chart.

@LoeiX If you accomplished this another way, please share if you have a chance so others can learn from you too!