Skip to main content

Apache ECharts Panel

Grafana 9 CI codecov Language grade: JavaScript

Introduction​

The ECharts Panel is a plugin for Grafana that allows to visualize Apache ECharts on your Grafana dashboard.

Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly customizable charts to your commercial products. It is written in pure JavaScript and based on zrender, which is a whole new lightweight canvas library.

Requirements​

  • Grafana 8.5+, Grafana 9.0+ is required.

Getting Started​

Apache ECharts panel can be installed from the Grafana Marketplace or use the grafana-cli tool to install from the command line:

grafana-cli plugins install volkovlabs-echarts-panel

Features​

  • Allows to visualize Apache ECharts using Monaco Code Editor with Auto formatting.
  • Use setOption() function to set configuration and data.
  • Based on the ECharts 5.3.3.
  • Supports Light and Dark mode synchronized with Grafana Theme.
  • Supports SVG and Canvas renderer.
  • Includes USA and World maps. Allows to add custom Map files in the maps folder.
  • Supports variables and location service to make Charts interactive.
  • Includes Liquid Fill Chart.

setOption() Function​

Configuration item, data, universal interface, all parameters and data can all be modified through setOption() function in the plugin's options. Available Parameters:

  • data - Grafana's data object.
  • theme - Grafana's theme object.
  • echartsInstance - Instance of the ECharts.
  • echarts - ECharts library.
  • replaceVariables - the replaceVariables() function to interpolate variables.
  • locationService - Grafana's locationService to work with browser location and history.

Panel

To learn more about parameters you can log them in the Browser Console:

console.log(
  data,
  theme,
  echartsInstance,
  echarts,
  replaceVariables,
  locationService
);

Tutorial​

Data visualizations can and should be done in style. In two parts video tutorial Daria explained how we built and visualized directed graph in Grafana using Apache ECharts panel.

Feedback​

We love to hear from users, developers, and the whole community interested in this plugin. These are various ways to get in touch with us:

  • Ask a question, request a new feature, and file a bug with GitHub issues.
  • Star the repository to show your support.

License​

  • Apache License Version 2.0, see LICENSE.