Customize default dashboard charts

Help
1

Am interested in customizing the 6 charts at the top of the dashboard (see attachment 1). I tried modifying the related code (see attachment 2) in /usr/share/netdata/web/main.js and restarting the server, but it had no effect. Please advise.

Attachment 1: https://i.imgur.com/OurFFM4.png
Attachment 2: https://i.imgur.com/NPiJjrt.png

2

No reason to mess with the code and your changes there wouldn’t be preserved after an update anyway. Look at Customize the standard dashboard | Learn Netdata

3

Thanks for the quick reply. I followed your suggestion, and I found that by customizing the dashboard_info_custom_example file, it functions in an interesting way.

For instance, if I write:

customDashboard.context = {
    'system.cpu': {
        info: 'helloWorld',
        mainheads: [
            function (os, id) {
 ........................................

The text I specified in “info” will replace the default text. Ok great! But whatever code I wrote in the ‘mainheads’ section will not replace the existing mainhead chart, but rather, add a new one at the end of the row of charts (see attachment 1 above). Is it possible to replace/remove the existing charts?

4

In this file you can add any custom Javascript code and it will be maintained across agent updates. Hiding charts isn’t supported via options at the moment, but you should be able to find a way to do it. Maybe someone else in the community has already done that too.

When you get it working, I’m sure some others may be interested too, so you could say in this thread how you did it!

1 Like