Documentationbreadcrumb arrow Pluginsbreadcrumb arrow Business Chartsbreadcrumb arrow Featuresbreadcrumb arrow Library imports
Grafana Cloud Enterprise Open source

Library imports

Note

The Business Charts panel supports NPM library imports starting from version 6.0.0.

Since version 6.4.0, you can return import with options instead of using the setOption(options) method.

You can import additional NPM libraries for use in the Business Charts panel using the import statement.

ecStat library

Additional libraries like ecStat can be loaded dynamically to provide additional functionality. In this example we use setOption(options) method in then method.

js 
const options = {};

/**
 * echarts-stat import
 */
import("https://esm.sh/echarts-stat@1.2.0").then(
  ({ default: ecStatImport }) => {
    context.echarts.registerTransform(ecStatImport.transform.regression);

    /**
     * setOption method use
     */
    context.panel.chart.setOption(options);
  }
);
Scatter type graph with imported ecStat library.

ecSimpleTransform library

For next example we use JSON API data source and data example from Apache ECharts website.

Code example for version 6.4.0 and above:

js 
/**
 * echarts-simple-transform import
 */
return import("https://esm.sh/@manufac/echarts-simple-transform@2.0.11").then(
  ({ default: ecSimpleTransform }) => {
    context.echarts.registerTransform(ecSimpleTransform.aggregate);

    /**
     * return options
     */
    return options;
  }
);
Boxplot type graph with imported ecSimpleTransform library.