ApexCharts

Common errors

Warnings

Install

Imports

• ApexCharts
  wrong

  const ApexCharts = require('apexcharts')

  correct

  import ApexCharts from 'apexcharts'

  This is the standard client-side import for the full bundle. CommonJS `require` should be avoided in modern projects due to potential tree-shaking issues, especially with older bundler configurations.

• ApexCharts
  wrong

  import ApexCharts from 'apexcharts'

  correct

  import ApexCharts from 'apexcharts/ssr'

  Use this specific entry point for Server-Side Rendering (SSR) environments. Attempting to use the default client-side import in Node.js for SSR will likely lead to errors.

• ApexCharts (modular core)
  wrong

  import ApexCharts from 'apexcharts'

  correct

  import ApexCharts from 'apexcharts/core'; import 'apexcharts/line';

  Since v5.7.0, ApexCharts supports feature-level tree-shaking. Import `apexcharts/core` for the base functionality, then add specific chart types (e.g., `apexcharts/line`) and features (e.g., `apexcharts/features/legend`) as needed to reduce bundle size. Using the full `apexcharts` import negates this optimization.

• ChartOptions (TypeScript type)
  wrong

  import { ApexOptions } from 'apexcharts'

  correct

  import type { ApexOptions } from 'apexcharts'

  For TypeScript, use `import type` for importing the `ApexOptions` interface to ensure it's removed during compilation, preventing unnecessary runtime code.

Quickstart

This quickstart code initializes and renders a basic bar chart using ApexCharts in a client-side browser environment, demonstrating chart creation with minimal configuration.

import ApexCharts from 'apexcharts';

const chartElement = document.querySelector('#chart');

const options = {
  chart: {
    type: 'bar',
    height: 350
  },
  series: [
    {
      name: 'sales',
      data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
    }
  ],
  xaxis: {
    categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
  },
  title: {
    text: 'Basic Bar Chart Example',
    align: 'left'
  }
};

if (chartElement) {
  const chart = new ApexCharts(chartElement, options);
  chart.render();
} else {
  console.error('Chart element with id "#chart" not found.');
}

// Example of updating series data (requires a chart instance already rendered)
// setTimeout(() => {
//   chart.updateSeries([{ data: [20, 50, 45, 30, 70, 55, 80, 100, 110] }]);
// }, 5000);