Skip to main content

Using Highcharts modules

This tutorial explains how to enable Highcharts modules in a DC app. By default, Highcharts includes various modules in its modules folder, but they are not automatically enabled. You need to explicitly enable the modules that you want to use in your chart.

Note on Highcharts Modules in DC Apps​

There are currently restrictions on using Highcharts modules in DC apps. The following code will not work on Corva dashboard:

import Highcharts from 'Highcharts';
import BellCurve from 'Highcharts/modules/histogram-bellcurve';

BellCurve(Highcharts);

Enabling Highcharts Modules​

To enable a Highcharts module in your DC app, you can follow these steps:

You can use only the following method:

  1. Copy the module code from the node_modules/Highcharts/modules/module-name.src.js file
  2. Create a new file in the src folder of your DC app and paste the module code there.
  3. Import the module factory function in your code and pass Highcharts as an argument to extend the Highcharts object with the module code.

Here's an example:

import Highcharts from 'Highcharts';
import BellCurve from './BellCurve.js';

// Extending Highcharts with the module code
BellCurve(Highcharts);

You can then use the Highcharts API to enable the module for your chart.