JavaScript code in the Dynamic Text panel

I am trying to write JS and HTML code. When I run it in the JS runtime it works for me but when I bring the code to the panel (dynamic text panel) it fails to display. What could be the problem and what is the solution?

This is what my code looks like when it works.

Welcome @mirib

Please copy the js code not a picture of the jscode

Its very small Nd we won’t need to retype the whole thing on our side

Here is my code:

<!DOCTYPE html>
  <link rel="stylesheet" href="" />
  <script src=""></script>
    #map {
      height: 400px;
  <div id="map"></div>


// Wait for the page to load completely and only then start running the code    document.addEventListener('DOMContentLoaded', function() {
      // Creating a variable of type "map" and defining the main view of the map
      var map ='map').setView([51.505, -0.09], 13);

// Adding the map layer to the map itself
      L.tileLayer('https://{s}{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; <a href="">OpenStreetMap</a> contributors',
        maxZoom: 18,

      var geojson ={
    "type": "FeatureCollection",
    "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
    "features": [
    { "type": "Feature", "properties": { "AOIs": "bbb", "daily": "33"}, "geometry": { "type": "Polygon", "coordinates": [ [ [ 33.5, 32.0 ], [ 33.5, 29.0 ], [ 36.0, 29.0 ], [ 36.0, 27.5 ], [ 33.5, 27.5 ], [ 32.5, 27.5 ], [ 29.0, 27.5 ], [ 29.0, 32.0 ], [ 33.5, 32.0 ] ] ] } },
    { "type": "Feature", "properties": { "AOIs": "aaa", "daily": "23"}, "geometry": { "type": "Polygon", "coordinates": [ [ [ 34.5, 32.5 ], [ 36.0, 32.5 ], [ 36.0, 29.0 ], [ 33.5, 29.0 ], [ 33.5, 32.0 ], [ 33.5, 32.5 ], [ 34.5, 32.5 ] ] ] } }


      var myStyle = {
        color: 'black',
        weight: 1

// Adding the GEOJSON layer to the map with customized configuration and behaviorvar geojsonLayer = L.geoJSON(geojson, {
  style: function(feature) {
    var dailyImagesValue =;
    var fillColor = calculateFillColor(dailyImagesValue);
    var style = Object.assign({}, myStyle);
    style.fillColor = fillColor;
    style.color = fillColor;
    return style;
  onEachFeature: function(feature, layer) {
    // Adding a click event to each entity in GEOJSON
    layer.on('click', function() {
      geojsonLayer.eachLayer(function(l) {
        if (l !== layer) {
          var currentFillColor = l.options.fillColor;
          var originalFillColor = calculateFillColor(;
          l.setStyle({color: originalFillColor});
      var currentFillColor = layer.options.fillColor;
      if (currentFillColor === 'black') {
        layer.setStyle({color: calculateFillColor(});
      } else {
        layer.setStyle({color: 'black'});
    // Added a tooltip to every entity in GEOJSON
    var tooltipContent =":  " +;
    layer.bindTooltip(tooltipContent, {sticky: true});
      //A function that returns the corresponding color according to a certain value
      function calculateFillColor(value) {
        if (value < 10) {
          return 'orange';
        } else if (value < 20) {
          return 'brown';
        } else if (value < 30) {
          return 'blue';
        } else if (value < 40) {
          return 'pink';
        } else if (value > 50) {
          return 'yellow';
        } else if (value < 60) {
          return 'green';
        } else if (value < 80) {
          return 'black';
        } else {
          return 'red';

Besides, even when I write only this HTML:

World Map

World Map

He doesn't show me here and elsewhere yes.


Please read the docu pn external libraries

Also why not use geomap or orchestra cities plugin for this? Because of lack of styling?


1 Like

No, because I had to add click events which, as much as I tried, I couldn’t create. I need to create click events on the polygon so that when a polygon is clicked its frame is painted black and also a certain variable is updated to the NAME value of the polygon. I did not succeed in geomap and orchestra cities plugin.


1 Like

download leaflet zip and copy content to a folder under public in grafana

1 Like

Well done @yosiasz! We will add an example in the documentation.

Dynamic Text plugin follows security guidelines to load external libraries. You can load them only if sanitized mode is disabled.

1 Like

I don’t have an external resources option in the panel.

@mirib Please read my comment above.

Sanitize should be disabled as explained in the documentation:

@mikhailvolkov , @yosiasz
I searched a lot until I found this issue
I’m working on exactly this and ran into the same problem
I want to add javascript code and I don’t have
external resources option in the panel
I can’t understand where Sanitize should be disabled
I thought in Advanced Settings
But I don’t have that either
can you help me

1 Like

@miriamwolloch Sanitize should be disabled in the Grafana settings using configuration file or environment variables:

Thank you!
It helped me a lot!
Now I will try to work with it.
If I get stuck I’ll post here again

1 Like

First thing, I want to thank you from the bottom of my heart, you helped me a lot!! Second thing, I want to move forward with my project. I encountered another problem: I want to access through the JS the variables of the dashboard I created in Grafana. How do you do that? Is it also possible to update the variable?

Always check the doco

1 Like

I enjoyed seeing that you uploaded my code to the Gafna documentation!
I was also happy to see that you are using my code to direct other users who are having trouble with this.
I wanted to ask if you could write it in my name as well so I can present it in job interviews?


@mirib I have not problems with that.

Is it regarding Leaflet External JavaScript and CSS | Volkov Labs?
What should I write mirib?

Yes thank you!
I would love for you to write this on my GitHub username: @BlinderMiri.

1 Like

@mirib Documentation updated. Please keep new ideas coming!