In previous steps of the tutorial, you have learned how several sections of the Netdata dashboard worked.
This step will show you how to set up a custom dashboard to fit your unique needs. If nothing else, Netdata is really, really flexible. 🤸
What you'll learn in this step
In this step of the Netdata guide, you'll learn:
- Why you might want a custom dashboard
- How to create and prepare your
- Where to add
dashboard.jsto your custom dashboard file
- How to add basic styling
- How to add charts of different types, shapes, and sizes
Let's get on with it!
Why should I create a custom dashboard?
Because it's cool!
But there are way more reasons than that, most of which will prove more valuable to you.
You could use custom dashboards to aggregate real-time data from multiple Netdata agents in one place. Or, you could put
all the charts with metrics collected from your custom application via
statsd and perform application performance
monitoring from a single dashboard. You could even use a custom dashboard and a standalone web server to create an
enriched public status page for your service, and give your users something fun to look at while they're waiting for the
503 errors to clear up!
Netdata's custom dashboarding capability is meant to be as flexible as your ideas. We hope you can take these fundamental ideas and turn them into something amazing.
Create and prepare your
By default, Netdata stores its web server files at
/usr/share/netdata/web. As with finding the location of your
netdata.conf file, you can double-check this location by loading up
http://HOST:19999/netdata.conf in your browser
and finding the value of the
web files directory option.
To create your custom dashboard, create a file at
/usr/share/netdata/web/custom-dashboard.html and copy in the
http://HOST:19999/custom-dashbord.html in your browser.
If you get a blank page with this text:
Access to file is not permitted: /usr/share/netdata/web/custom-dashboard.html.
You can fix this error by changing the dashboard file's permissions to make it owned by the
Reload your browser, and you should see a blank page with the title: Your custom dashboard!
dashboard.js to your custom dashboard file
You need to include the
dashboard.js file of a Netdata agent to add Netdata charts. Add the following to the
of your custom dashboard page and change
HOST according to your setup.
When you add
also scans the page for elements that define charts, builds them, and refreshes with new metrics.
If you enabled SSL on your Netdata dashboard already, you'll need to use
https://to grab the
Add some basic styling
While not necessary, let's add some basic styling to make our dashboard look a little nicer. We're putting some
basic CSS into a
<style> tag inside of the page's
Creating your dashboard's charts
Time to create a chart!
You need to create a
<div> for each new chart. Each
<div> element accepts a few
data- attributes, some of which
are required and some of which are optional.
Let's cover a few important ones. And while we do it, we'll create a custom dashboard that shows a few CPU-related charts on a single page.
The chart unique ID (required)
You need to specify the unique ID of a chart to show it on your custom dashboard. If you forgot how to find the unique ID, head back over to step 2 for a re-introduction.
You can then put this unique ID into a
<div> element with the
data-netdata attribute. Put this in the
your custom dashboard file beneath the helpful comment.
Reload the page, and you should see a real-time
... and a whole lot of white space. Let's fix that by adding a few more charts.
Set chart duration
By default, these charts visualize 10 minutes of Netdata metrics. Let's get a little more granular on this dashboard. To
do so, add a new
data-after="" attribute to each chart.
data-after takes a relative number of seconds from now. So, by putting
-300 as the value, you're asking the
custom dashboard to display the last 5 minutes (
5m * 60s = 300s) of data.
Set chart size
You can set the size of any chart using the
data-width="" attributes. These attributes can be
anything CSS accepts for width and height (e.g. percentages, pixels, em/rem, calc, and so on).
Let's make the charts a little taller and allow them to fit side-by-side for a more compact view. Add
data-width="50%" to each chart.
Now we're getting somewhere!
While we already have a perfectly workable dashboard, let's add some final touches to make it a little more pleasant on the eyes.
First, add some extra CSS to create some vertical whitespace between the top and bottom row of charts.
To create horizontal whitespace, change the value of
data-width="calc(50% - 2rem)".
Told you the
data-height attributes can take any CSS values!
Prefer a dark theme? Add this to your
<head> above where you added
Refresh the dashboard to give your eyes a break from all that blue light!
In case you got lost along the way, here's the final version of the
In this guide, you learned the fundamentals of building a custom Netdata dashboard. You should now be able to add more
charts to your
custom-dashboard.html, change the charts that are already there, and size them according to your needs.
Of course, the custom dashboarding features covered here are just the beginning. Be sure to read up on our custom dashboard documentation for details on how you can use other chart libraries, pull metrics from multiple Netdata agents, and choose which dimensions a given chart shows.
Next, you'll learn how to store long-term historical metrics in Netdata!