Plotly panel

This documentation topic is designed for Grafana workspaces that support Grafana version 8.x.

For Grafana workspaces that support Grafana version 10.x, see Working in Grafana version 10.

For Grafana workspaces that support Grafana version 9.x, see Working in Grafana version 9.

The Plotly panel renders charts using Plotly, an open source javascript graphing library.

The Data, Layout and Config fields match the common parameters described in the Plotly documentation. They must be in JSON format.

Data provided by the datasource can be transformed via a user-defined script before to be injected in the Plotly chart. The script includes 2 arguments.

• data – Data returned by the data source.

• variables – An object that contains Grafana variables in the current dashboard (user variables and these few global variables: __from, __to, __interval, and __interval_ms).

The script must return an object with one or more of the following properties: data, layout, config and frames. The following is an example.

let x = data.series[0].fields[0].values;
let y = data.series[0].fields[1].values;
let series = {
    x: x,
    y: y,
    name: variables.name, // where ‘name’ is the name of a Grafana dashboard variable
};

return {
    data: [series],
    config: {
        displayModeBar: false,
    },
};

Object returned by the script and JSON provided in the Data, Layout and Config fields will be merged (deep merge).

If no script is provided, the panel will use only Data, Layout and Config fields.