Plotly.js and Grafana

plotly.js
1

I’m trying to use plotly.js in Grafana, as I want to make a dashboard with option greeks sensitivities to some parameters changing.
In all of the plots I want one or two vertical lines that refer to the present value of some option parameters.
What I did is the following:

console.log(data)

var delta = {
  x: data.series[0].fields[1].values.buffer,
  y: data.series[0].fields[2].values.buffer,
  mode: 'lines',
  name: 'delta',
  line: {
      color: 'red',
      width: 4
    }
};

var gamma = {
  x: data.series[0].fields[1].values.buffer,
  y: data.series[0].fields[3].values.buffer,
  mode: 'lines',
  name: 'gamma',
  line: {
      color: 'yellow',
      width: 4
    }
};

var vega = {
  x: data.series[0].fields[1].values.buffer,
  y: data.series[0].fields[4].values.buffer,
  mode: 'lines',
  name: 'vega',
  line: {
      color: 'blue',
      width: 4
    }
};

var theta = {
  x: data.series[0].fields[1].values.buffer,
  y: data.series[0].fields[5].values.buffer,
  mode: 'lines',
  name: 'theta',
  line: {
      color: 'green',
      width: 4
    }
};

var rho = {
  x: data.series[0].fields[1].values.buffer,
  y: data.series[0].fields[6].values.buffer,
  mode: 'lines',
  name: 'rho',
  line: {
      color: 'orange',
      width: 4
    }
};


return {data:[delta,gamma,vega,theta,rho],layout:{title:'Option Greeks Volatility Sensitivity'}};

The layout of the plot is this:

{
  "font": {
    "color": "darkgrey"
  },
  "paper_bgcolor": "rgba(0,0,0,0)",
  "plot_bgcolor": "rgba(0,0,0,0)",
  "margin": {
    "t": 30,
    "b": 20
  },
  "xaxis": {
    "type": "float"
  },
  "shapes": [
    {
      "type": "line",
      "x0": "Math.min(data.series[0].fields[7].values.buffer)",
      "y0": "Math.min(theta.y)",
      "x1": "Math.min(data.series[0].fields[7].values.buffer)",
      "yref": "paper",
      "name": "current volatility",
      "line": {
        "width": "4",
        "color": "purple",
        "dash": "dot"
      }
    }
  ]
}

I never used plotly.js (nor javascript) before, so I’m definitely a very beginner in this and what I wrote is what I could gather from other stackoverflow questions. However, the code I wrote doesn’t work.
Basically, what I want to do is to plot a vertical line for the whole height of the plot (which is not fixed) in a point that is given by the min(data.series[0].fields[7].values.buffer) and I also want a legend that contains a reference to the vertical line.

2

The “layout” section is JSON only, you can’t run any code there. To fix it you have to move your shapes into the “script” section, like so:

...
const layout = {
title:'Option Greeks Volatility Sensitivity'
"shapes": [
    {
      "type": "line",
      "x0": Math.min(data.series[0].fields[7].values.buffer),
      "y0": Math.min(theta.y),
      "x1": Math.min(data.series[0].fields[7].values.buffer),
      "yref": "paper",
      "name": "current volatility",
      "line": {
        "width": "4",
        "color": "purple",
        "dash": "dot"
      }
    }
  ]
};

return {data:[delta,gamma,vega,theta,rho],layout};