Getting Started

The custom chart API provides developers with an interface to create interactive charts that integrate with the native Zoomdata chart controls. To get started with the custom chart API, you need to install the Zoomdata Chart CLI. The chart cli is designed to help you manage all aspects of the custom chart creation process in Zoomdata. Additionally, you need to use the credentials of a Zoomdata user with ADMIN role when configuring the chart cli.

For more detailed step-by-step instructions on getting started, visit the custom chart tutorial.

Install Zoomdata's Custom Chart CLI

npm install zoomdata-chart-cli@4 -g

Using the Zoomdata Custom Chart CLI

1. Configure the CLI. zd-chart config
2. Create a new custom chart. zd-chart init <some_path>/<your_chart_name>
3. From the newly created custom chart directory, run npm install — This will install your custom chart's development dependencies.
4. Compile the custom chart code that will be pushed to the server —npm run build
5. Push the custom chart to the server — zd-chart push
6. Enable the custom chart for a source by navigating to the Sources page /zoomdata/admin.html#sources and selecting a source. Switch to the Charts->Custom tab and ensure the custom chart's checkbox is checked.
7. Create a new dashboard with your custom chart. You should see a chart widget with a Group and Metric picker.
8. You are now ready to continue building out your custom chart.

Adding custom chart packages

Running zd-chart import <name> <filepath.zip> adds the specified custom chart to the Zoomdata server.

Work through the tutorial

It walks you through building a custom chart from scratch. Go to the tutorial.