# NPM Packs for Chart

**URL:** <https://forum.wixstudio.com/t/npm-packs-for-chart/4685>\
**Category:** Ask the community\
**Tags:** code, question\
**Created:** [April 5, 2021, 1:08pm UTC](https://forum.wixstudio.com/t/npm-packs-for-chart/4685 "2021-04-05T13:08:45Z")\
**Posts on this page:** 1\
**Showing post:** 11

<div class="post-metadata">

**Author:** ![amandam](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/amandam/32/79539_2.png) [@amandam](https://forum.wixstudio.com/u/amandam)\
**Post date:** [January 24, 2022, 9:29pm UTC](https://forum.wixstudio.com/t/npm-packs-for-chart/4685/11 "2022-01-24T21:29:16Z")

</div>

@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

 ![](https://us1.discourse-cdn.com/wix/original/3X/b/6/b6a91c76d00a9830acf7d682fe4fa8735a179700.png)  
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.

```javascript
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’

 ![](https://us1.discourse-cdn.com/wix/original/3X/8/4/841761f50ca07827d0bcc3a244d1a8102ca9775a.png)

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!

---

_[View the full topic](https://forum.wixstudio.com/t/npm-packs-for-chart/4685)._