Grafana 9+ and Flot legen container seems broken

  • What Grafana version and what operating system are you using?
    8.5.13 +

  • What are you trying to achieve?
    Display custom panel legend in a container element

  • How are you trying to achieve it?
    Using flot

  • What happened?
    react-dom.production.min.js:216 TypeError: e.find(…).html is not a function
    ** at jquery.flot.js:2818:42**
    ** at N (jquery.flot.js:1674:7)**
    ** at new a (jquery.flot.js:716:5)**
    ** at e.plot (jquery.flot.js:3296:16)**

  • What did you expect to happen?
    No error, panel with legend displays correctly

  • Can you copy/paste the configuration(s) that you are having problems with?

  • Did you receive any errors in the Grafana UI or in related logs? If so, please tell us exactly what they were.
    react-dom.production.min.js:216 TypeError: e.find(…).html is not a function
    at jquery.flot.js:2818:42
    at N (jquery.flot.js:1674:7)
    at new a (jquery.flot.js:716:5)
    at e.plot (jquery.flot.js:3296:16)

  • Did you follow any online instructions? If so, what is the URL?
    Flot Examples: Graph Legend

I just made it work by setting the legend after calling $.plot(ref.current, plotData, plotConfig)
But it seems that the flot version in grafana 9 at least is not the latest, and trying to use the container property in the configuration will have this issue.