Creating Your First JavaScript Chart

This page walks through creating and rendering an ApexCharts chart from scratch using vanilla JavaScript. By the end you will have a working interactive line chart running in the browser with fewer than 15 lines of code.

Step 1: Add a Container Element

ApexCharts renders into a DOM element you provide. Add an empty <div> to your HTML with an id you can reference in JavaScript:

<div id="chart"></div>

The library sizes the chart to fit this container. You can control the dimensions using the chart.width and chart.height options, or by setting CSS dimensions on the element itself.

Step 2: Create the Options Object

ApexCharts is configured through a plain JavaScript object. Three properties are required for a minimal chart:

• chart.type: the chart type to render ('line', 'bar', 'area', and so on).
• series: an array of data sets. Each entry has a name (used in tooltips and legends) and a data array of numeric values.
• xaxis.categories: the labels that appear along the horizontal axis, one per data point.

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]
  }
}

series is an array so you can plot multiple data sets on the same chart. Pass additional objects with their own name and data to add more lines.

Step 3: Instantiate and Render

Pass the target DOM element and the options object to the ApexCharts constructor, then call render():

var chart = new ApexCharts(document.querySelector('#chart'), options)

chart.render()

render() is asynchronous and returns a Promise. If you need to act after the chart has drawn (for example, to call an update method), you can await it:

await chart.render()
// chart is fully drawn here

Complete HTML Page

The following page is self-contained. Copy it into a file, open it in a browser, and the chart renders immediately. No build step or server required.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My First ApexChart</title>
</head>
<body>
  <div id="chart"></div>

  <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
  <script>
    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()
  </script>
</body>
</html>

Edit on CodePen

What Comes Next

• Chart Types: all supported chart types and when to use each one.
• Series Formats: how to structure data for different chart types, including paired [x, y] points, datetime values, and grouped categories.
• Chart Options: the full reference for chart.* configuration including dimensions, animations, zoom, toolbar, and events.