Zoomdata Version

Creating a Custom Chart Using the CLI

A complete example of creating a custom chart using the Custom Chart CLI can be found here: https://www.zoomdata.com/developers/tutorials/custom-chart/.

To create a custom chart locally using the Custom Chart CLI:

  1. Open the Zoomdata CLI.
  2. Run the following command to create the chart.

    $ zd-chart init <path-to-chart>

    Optionally, you can provide a type parameter. Valid values are single-group, multi-group, or raw. The default is single-group. For example:

    $ zd-chart init -t multi-group <path-to-chart>

The zd-chart init command creates a directory in the specified path containing the files you need to get started. Here is a preview of the directory tree:

.
			├── package.json
			├── src
			│   ├── index.css
			│   └── index.js
			├── visualization.json
			└── webpack.config.js

The following table describes the function of each file in the tree:

File Description
index.css Your chart's CSS (style sheet) code.
index.js Your chart's JavaScript code. Additional files can be used and imported into this file.
package.json Lists the packages your chart depends on. For more information, see https://docs.npmjs.com/creating-a-package-json-file.
visualization.json Contains the name, controls, and variables of your chart.
webpack.config.js The webpack configuration. Webpack is used in charts to bundle your code into a single file.

Was this topic helpful?