Include variable in HTML Graphics plugin

[dmned-ph]

I am using Grafana 11.3 with the HTML Graphics plugin 2.1.1. I simply want to include the value of a dashboard constant variable in the HTML/SVG body. Using ${VariableName} displayed as exactly that, ${VariableName} when I expect the value to be displayed. Below is my test panel:

<div style="position: absolute; top: 0px; display: inline-block;">
  <!-- Adjustable image size -->
  <img 
    src="<<REDACTED>>" 
    style="width: 100%; max-width: 400px; height: auto; display: block;"
  />
  <!-- Text floating over the image -->
  <div style="position: absolute; bottom: 10px; left: 10px; font-family: Arial; font-size: 20px; color: white; background: rgba(0, 0, 0, 0.5); padding: 5px; border-radius: 5px;">
    <b>ALT No.: </b>${AltIDNo}<br>
    <b>CUSTOMER: </b>${Customer}<br>
    <b>LOCATION: </b>${Location}
  </div>
</div>

[ZuperZee]

This plugin doesn't replace the HTML content with the variables. You can manually do it in the onInit or onRender code, though.

The easiest thing to do is to add:

htmlNode.innerHTML = htmlGraphics.props.replaceVariables(htmlNode.innerHTML);

to the onInit section.

For a bit more control you could manually add the HTML in the onInit section:

const targetElt = htmlNode.querySelector("div > div");

targetElt.innerHTML = htmlGraphics.props.replaceVariables(`
<b>ALT No.: </b>\${AltIDNo}<br>
    <b>CUSTOMER: </b>\${Customer}<br>
    <b>LOCATION: </b>\${Location}`);

The examples above use htmlGraphics.props.replaceVariables(...), which is the same as getTemplateSrv().replace(...).
https://gapit-htmlgraphics-panel.gapit.io/docs/examples/update-grafana-variable-example/
The core is that you must manually update the variables in the onInit section.

Alternatively, you could use the built-in Text panel. It replaces the variables in the HTML section.

[dmned-ph]

I stuck with the HTML Graphics plugin and used your example, and it worked perfectly! Thank you!! I figured it was something simple.

I wanted to stick with that plugin because it seemed to give more options for creating the effect I wanted, namely, to have the text float over part of the image, like this:

The Text plugin didn't seem to do that effectively, although I didn't really dig deep on why.

And thank you for the quick reply!