Search code examples
javascriptannotationslinegrafanathickness

Grafana how to change annotation line thickness

Is there any option/workaround to change Grafana's annotation line thickness?

The line of an annotation is so thin it can be barely seen.

It would be also more visible if the line styling could be changed from dashed to solid.

Solution

  • I have not found any way to change it in Grafana but I wrote Greasemonkey script that gets the job done and the annotation line I have now is 5px thick instead of 1px:

    // ==UserScript==
// @name     Grafana
// @version  1
// @grant    none
// @match http://127.0.0.1:3000/*
// ==/UserScript==

setInterval(function() {

  // change the line thickness
  var annotationLineElArr = document.querySelectorAll('div.graph-panel div.events_line');
  for (i=0;i<annotationLineElArr.length;i++) {
    var annotationLineEl = annotationLineElArr[i];
    annotationLineEl.style.borderLeftWidth = '5px';
  }
  
  // change the bottom marker size
  var annotationMarkerElArr = document.querySelectorAll('div.graph-panel div.events_marker');
  for (i=0;i<annotationMarkerElArr.length;i++) {
    var annotationMarkerEl = annotationMarkerElArr[i];
    annotationMarkerEl.style.borderWidth = 'medium 10px 12px'
    annotationMarkerEl.style.left = '-12px'
  }
  
}, 1000/1);

    Before:

    original

    After

    modified

    Since I made the vertical line 4px thicker then probably it should be moved left by 2px to be exactly at the middle of the timestamp it represents but I don't care so much about it so I did not change CSS in that regard.

    change:

    @match http://127.0.0.1:3000/*

    to your own address to get it working and don't forget to have the script and Greasemonkey turned on.