An index.js file is the main entry file of a widget. This topic describes common functions in the file.

For more information, see the example widget.

Common functions

Function Description
render(array: data)

Provides a default rendering method. After a widget is initialized, its rendering logic is called to pass data as input parameters.

This function supports re-rendering, which generates the same rendering effect from the same input data.

updateOptions(object: config) Updates the widget settings. This function receives updated config settings as the input parameters.
emit(string: event_name, object: value) Triggers an event. The input of value is an object.
resize(int: width, int: height) Resizes a widget. This function is called when you drag a widget to resize it.
clear() Deletes a widget. This function is called when you delete a widget.
destroy() Destroys a widget. This function is called when you destroy a widget.
require(*) This function supports .js or .html files.
getThemableConfig(themeConfig) Allows you to configure themes. When you configure the theme for a widget, this function is called and returns the mapping between the theme and widget configurations. In addition, you can use theme configuration items in themeConfig to configure the theme. Before you call this function, you must use the supportTheme field to declare whether a widget supports theme configurations. If you set this field to true, the widget supports theme configurations. For more information, see getThemableConfig(themeConfig).


The getThemableConfig(themeConfig) function is used to configure a theme for a widget by using themeConfig and return the mapping between the theme and widget configurations.

The following example describes how to call the getThemableConfig(themeConfig) function.
getThemableConfig: function(themeConfig) {
 if (! themeConfig) return null;
 const themeMap = {
 color: themeConfig.textColor,
 bgColor: palette[0]
 return themeMap;
Sample configurations in themeConfig
  "bgColor": "#202020",        // The background color.
  "textColor": "#FFFFFF",     // The text color.
  "axisColor": "#FFFFFF",    // The axis color.
  "assistColor": "#FFFFFF", // The color of the auxiliary information.
  "palette": [             // The color palette.