Skip to main content

Dynamic Text Panel

Dynamic Text Panel is a Grafana visualization plugin that you can use to convert plain text and table data into visually appealing, easy-to-read information cards. For that, the offered arsenal includes:

  • Access to variables (dashboard and global),
  • Markdown,
  • Handlebars,
  • Helpers (predefined and your own),
  • CSS styles
  • JavaScript.

By working with the Dynamic Text Panel plugin you construct a text visualization template:

  • using the above-mentioned features and
  • indicating the spots where the fetched data frame elements should be placed.

Below is the last of three videos we created to demonstrate the possibilities of this plugin. Please, note, that since the date the last video was published (August 15, 2023), we introduced many more features.

Use HTML, Markdown, JavaScript, and CSS in Dynamic Text Panel for Grafana.

Requirements​

  • Dynamic Text Panel 4.X requires Grafana 9 or Grafana 10.
  • Dynamic Text Panel 2.X and 3.X require Grafana 8.5 or Grafana 9.
  • Dynamic Text Panel 1.X requires Grafana 7.

Getting Started​

You can install Dynamic Text Panel from the Grafana Plugins catalog or using the Grafana command line tool.

For the latter, please use the following command:

grafana-cli plugins install marcusolsson-dynamictext-panel

Highlights​

  • Uses Monaco Code Editor with automatic formatting supporting templates, JS code snippets, and CSS styling.
  • Supports Markdown and Handlebars.
  • Renders markdown-it into HTML elements.
    • Supports the highlighting of code syntax using A11Y styles.
  • Provides code sanitization:
    • HTML inside templates is sanitized using XSS.
    • Can be disabled in the Grafana configuration through the disable_sanitize_html parameter.
  • Supports display of nested objects using the {{json object}} Handlebars helper.
  • Supports display of time global variables (__to and __from) as seconds, ISO timestamps, or formatted using the dayjs library.
  • Supports adding the Handlebars helpers and event handlers.
  • Supports adding CSS styles.
  • Supports internationalization using custom helpers.
Dynamic Text Panel for Grafana.
Dynamic Text Panel for Grafana.

Documentation​

SectionDescription
RenderingExplains how to create a visualization template for your data.
RecipesLists useful snippets that you can use in your templates.
FeaturesExplains the plugin's features.
Blog postsRelated blog posts.
Release NotesStay up to date with the latest features and updates.

Feedback​

We're looking forward to hearing from you. You can use different ways to get in touch with us.

  • Ask a question, request a new feature, or report an issue at GitHub issues.
  • Subscribe to our YouTube Channel and leave your comments.
  • Sponsor our open-source plugins for Grafana at GitHub Sponsor.
  • Support our project by starring the repository.

License​

Apache License Version 2.0, see LICENSE.