NPM Packs for Chart

Ask the community
,
1

I want to add a chart to my website like that :
https://apexcharts.com/javascript-chart-demos/area-charts/spline/

I added the npm pack of these charts but I didn’t understand how can I use this chart on my website. Do you guys anyone know how to use this chart with their npm pack?

import ApexCharts from 'apexcharts'

var options = {
    series: [{
        name: 'series1',
        data: [31, 40, 28, 51, 42, 109, 100]
    }, {
        name: 'series2',
        data: [11, 32, 45, 32, 34, 52, 41]
    }],
    chart: {
        height: 350,
        type: 'area'
    },
    dataLabels: {
        enabled: false
    },
    stroke: {
        curve: 'smooth'
    },
    xaxis: {
        type: 'datetime',
        categories: ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z", "2018-09-19T04:30:00.000Z", "2018-09-19T05:30:00.000Z", "2018-09-19T06:30:00.000Z"]
    },
    tooltip: {
        x: {
            format: 'dd/MM/yy HH:mm'
        },
    },
};

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

When I place this code as a .js file at the backend of my website it says .document is not defined?
How can I solve this problem and use this chart on my website?

1 Like
2

I’m also interested

3

You need to use an iframe to put a chart in WIX, that’s why you don’t have any document object. I have an answer showing something like this using Chart.JS here !

4

I have done it already :slight_smile: thanks for the answer I used custom element for it

5

@loeix How did you implement Apexcharts in Wix? Can you please provide an example ?

6

@paul51482 I deleted my codes :slight_smile: but I’ll write an example here soon about how to use Apexcharts in Wix with custom elements since I understand and learned custom elements much better It’s not very hard for me anymore :slight_smile:

7

@loeix man I would be very grateful ! I’m so stuck lol

8

Even if you could just get the first chart going https://apexcharts.com/docs/creating-first-javascript-chart/

I can progress that, I just can’t get it loading at all.

9

@loeix any luck ?

10

Did you manage to get Apexcharts working in Wix?

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!