Tutorial : how to make the panel header disappear (the tab with view,edit, share,ect...)

Grafana How To
1

Hello everyone,

This is a tutorial to remove the panel header, the tab with view,edit, share,ect…

image

To do this, simply add this code to a text panel:

<button onclick="myFunction()">E D I T </button>
<script>

document.getElementsByClassName('panel-header')[0].style.visibility = 'hidden';

[].forEach.call(document.querySelectorAll('.panel-header'), function (el) {
  el.style.visibility = 'hidden';
});

var arrow = 0
function myFunction() {
  arrow = arrow ^ 1 
  
  if (arrow == 1)

{
document.getElementsByClassName('panel-header')[0].style.visibility = 'hidden';

[].forEach.call(document.querySelectorAll('.panel-header'), function (el) {
  el.style.visibility = 'hidden';
});
}
else
{
    document.getElementsByClassName('panel-header')[0].style.visibility = 'visible';
    [].forEach.call(document.querySelectorAll('.panel-header'), function (el) {
  el.style.visibility = 'visible';
});

}
}

</script>

I called this new mode “full viewer”

This mode can be very useful if you develop a dashboard on a touch screen (like me) so you don’t have to click a button several times when you want to access a new page (via a link on a singlestat panel)

You will therefore have a button (which you can modify as you wish afterwards) that allows you to switch between the “full viewer” mode and the “edit” mode.

Don’t forget to give me your feedback.

Thank you! Thank you!

2 Likes
2

Have you checked out this code snippet in newer versions of Grafana? AFAIK javascript is disabled by default.

2 Likes
3

Yes, just activate it and it works.

4

For anyone that stumbles on this, I had the same need and built off of @sebcrnac solution to get to a version that disables panel headers on page load. Forum thread HERE Thank you @sebcrnac for getting me pointed in the right direction.

5

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.