ApexCharts

This is a module that integrates the ApexCharts library with the Charts module.

"ApexCharts is a modern charting library that helps developers to create beautiful and interactive visualizations for web pages." (ApexCharts website).

The project is open-source (MIT license) and free to use in commercial applications.

Available chart types and features include:

• Area,
• Range Area,
• Bar,
• Box & Whisker,
• Bubble,
• Candlestick,
• Column,
• Donut,
• Dumbbell,
• Gauge/Radial Bar,
• Heatmap,
• Line,
• Pie,
• Radar,
• Range-Bars,
• Scatter,
• Slope,
• Spline,
• Treemap

The Charts module allows for combination charts either through Views or the Charts API.

Requirements

This module requires the following modules:

• Charts (version 5.2.1 or higher)

Recommended modules

If you don't want to use data already in your site, here are a few recommended modules:

• Charts AI Agents
• Views CSV Source
• Views JSON Source
• Views Database Connector
• External Entities
• Views Fields On/Off

Installation

Install as you would normally install a contributed Drupal module. For further information, see Installing Drupal Modules.

This module uses Asset Packagist to bring in the ApexCharts library. Before you require the module with Composer, you need to make sure the following exist in your composer.json file:

1. The Asset Packagist repository is added to the "repositories" section.

   "repositories": [
     {
       "type": "composer",
        "url": "https://packages.drupal.org/8"
      },
      {
        "type": "composer",
        "url": "https://asset-packagist.org"
       }
   ],
   

2. The "mnsami/composer-custom-directory-installer" package is installed. This package allows you to install libraries into the "/libraries" directory instead of the default "/vendor" directory.

   composer require --prefer-dist mnsami/composer-custom-directory-installer
   

3. The installer types and paths are set in the "extra" section of your composer.json file. This tells Composer to install ApexCharts into the "/libraries/apexcharts" directory.

   "extra": {
     "installer-types": ["npm-asset", "bower-asset"],
     "installer-paths": {
       "web/libraries/{$name}": [
         "type:drupal-library",
         "type:bower-asset",
         "type:npm-asset"
       ]
     }
   }
   

Configuration

1. Enable the module at Administration > Extend.
2. Set ApexCharts as your default charting library at /admin/config/content/charts.
3. Create your chart! There are three ways to create a chart:
   • Create a view and use the "Chart" format
   • Add a "Chart" field to your entity type (e.g. node, user, etc.)
   • Use the Charts API to create a chart programmatically