Skip to main content

setOption() Function

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

Available parameters

  • data - Grafana's data object with time range, series and request information.
  • theme - Grafana's theme object.
  • echartsInstance - Instance of the ECharts.
  • echarts - ECharts library.
  • ecStat - A statistical and data mining tool for Apache ECharts.
  • replaceVariables - the replaceVariables() function to interpolate variables.
  • locationService - Grafana's locationService to work with browser location and history.
  • notifySuccess(['Header', 'Message']) - Display successful notification.
  • notifyError(['Header', 'Error Message']) - Display error notification.


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


Dashboard and Global Variables

Use replaceVariables() function to replace Dashboard and Global variables.

const email = replaceVariables("${}");

You can find global built-in variables in the Grafana documentation.

Data Sources

To use Apache ECharts with data from data sources get each field in a array: => {
if (s.refId === "logo") {
images = s.fields.find((f) => === "body").values.buffer;
} else if (s.refId === "connections") {
sources = s.fields.find((f) => === "source").values.buffer;
targets = s.fields.find((f) => === "target").values.buffer;
} else if (s.refId === "nodes") {
titles = s.fields.find((f) => === "title").values.buffer;
descriptions = s.fields.find((f) => === "description").values.buffer;

Merge elements into array:

  • get values for each field
  • combine in an array of arrays
  • use as series[0] to access first query
const series = => {
const rates = s.fields.find((f) => === "Rate").values.buffer;
const calls = s.fields.find((f) => === "Calls").values.buffer;
const names = s.fields.find((f) => === "Name").values.buffer;

return, i) => [d, calls[i], names[i]]);

Event Handling

Users can trigger corresponding events by their operation. To react on Mouse and other events use echartsInstance:

* On Mouse Click
echartsInstance.on('click', (params) => {
notifySuccess(['Event', 'On Click']);
echartsInstance.resize(); // to redraw visualization

* On Double Click
echartsInstance.on('dblclick', (params) => {

Take a look at the official documentation Event and Action to learn more.


Success and Error notifications can be triggered on events handling:

notifySuccess(['Update', 'Values updated successfully.']);
notifyError(['Update', `An error occured updating values.`]);

Scale when resize

To scale the content when panel resized use echartsInstance methods to retrieve width and height of the panel.

  graphic: {
type: "image",
style: {
image: `data:image/svg+xml;utf8,${SVG}`,
width: echartsInstance.getWidth(),
height: echartsInstance.getHeight(),

Take a look at the official documentation echartsInstance to see all available methods.